Community Post

Learn HTML5 and CSS3

divyae

Core HTML concepts:

  • Professional, clean and valid HTML Markup
  • Text and formatting
  • Lists and inputs
  • Forms and Input
  • Div Tags and CSS

Advanced HTML5 concepts:

  • New elements and input tags
  • Canvas and SVG features
  • Audio and Video
  • Geolocation
  • Web storage / Local storage
  • Application Cache
  • Mobile Developments

HTML Stands for Hyper Txt Markup Language

WWW creates the standards of HTML

Syntax of HTML:

        <p> Paragraph Tag </p>
         <h1> Header Tag </h1>
         <i> italic Used for fonts </i>
         <b> Break Tag </b>

<!DOCTYPE html> is written in the begining of the html. Is likely to understand by browser for which HTML Version its written in.

Block level Elements: Creates newline before and after and occupies the whole space.

Some of  Tags for block level:
                 <p> Starts new line 
                 <h1>   <h6> 
                 <form>

Inline Elements: Do not creates a new line, no line break and will occupy only the particular space.

Example of Tags for Inline : 
                <a> 
                <strong> 
                <input/>
                <span>
**Example for Block level and inline level:**
<!DOCTYPE>
<html>
      <head>
      <style>
            .box {
                     border : 3px solid pink;;
                  }
            .box1 {
                      width : 100px;
                     height : 25px;
                     margin : 5px;
                     border : 3px solid black;
                 }   
     </style>
     </head>
      <body>
                  <h2> Block Level - Example </h2>
                       <div class = "box"> Block level Box  1 </div>
                       <div class = "box"> Block level Box  2 </div>
                       <div class = "box"> Block level Box  3 </div>
                <h2> Inline Level - Example </h2>
                       <div class = "box1"> Inline level Box  1 </div>
                       <div class = "box1"> Inline level Box  2 </div>
                       <div class = "box1"> Inline level Box  3 </div>
                       <div class = "box1"> Inline level Box  4 </div>
                       <div class = "box1"> Inline level Box  5 </div>
                       <div class = "box1"> Inline level Box  6 </div>
         </body>
</html>

Attributes: We Can have width and size as attributes. It Provides additional info about the element. Most attributes are name-value pairs seperated withan "=".

Example:
<a href = "http://--------- </a>
Here href is an attribute.

Style: Style can be done to any inline or block level elements.

Example:
<p style = "color:red" > Divya </p>

id and class in HTML5: It specifies identification to element. Id is always unique and class is multiple means we can name the same class name for multiple elements. Class name can be used by CSS and JavaScript to perform tasks for elements with the specified class name

Example for ID:
# my name {
background-color: Red;
}
<p id =  "my name" > Divya </p>
Here id is called by using # in CSS
Example for class:
.my name {
background-color: Red;
}
<p class =  "my name" > Divya </p>
<p class = "my name" > Navya </p>
Here class is called by using dot (.) in CSS 

Title: Title means exact info about the element. It Displays like tooltip in some browsers.

Singleton tags: These tags does not have a closing tag. Its also called as Trailing tag.

Example:
                   <img> 

Using images in HTML: <img> tag is used and called as singleton tag.

Example:  <img src = "-----------"  alt = "--------------"  >
     Here img is used to load the image on the page and alt gives the text tag and displays like logo to web page.

Style Attributes Selectors:

                                          color : red;
                                          background : color - blue;
                                          padding : 5 px;
                                          margin : 5 px; 
                                          dispaly : block;
                                          border-style : solid;
                                          border-color : black;

Padding: Padding is from edge of text to top of the div. In other words CSS padding properties are used to generate space around an element's content, inside of any defined borders.

Example: 
                  div {
                              padding-top : 5px;
                              padding-right : 6px;
                              padding-left : 7px;
                              padding-bottom : 8px;
                       }
                                       OR
                   div { 
                               padding : 5px  6px  7px 8px;
                         }

Margin: Margin would be edge of the div out. In other words CSS margin properties are used to create space around elements, outside of any borders.

Example: 
                    div { 
                               margin-top: 5px;
                               margin-right: 6px;
                               margin-bottom: 7px;
                               margin-left: 8px;
                           }   
                                         OR
                     div {
                                margin : 5px 6px 7px 8px;
                           }

CSS Box Model: All HTML elements can be considered as boxes. In CSS, the term "Box Model" is used when talking about design and layout. The Box model is essentially a box that wraps around every single HTML element. It contains margins, borders, padding and content. Please refer the below image: [https://cdn.scotch.io/55044/qB7fdhZbRE6H7sS2MORV_boxmodel-image.png]

Eample:   div { 
                width : 100px;
                border : 200px solid pink;
                padding : 300px;
                margin : 400px;
             }

HTML tables and lists : Similar to excel sheet. Used for 100 of records means large data. Data can be organized with tables.

Syntax: 
         <table>
             <tr>
            <td>cell 1 </td>
             <td>cell 2 </td>
             <td>cell 3 </td>
          </tr>
          <tr> 
            <td>cell 4 </td>
             <td>cell 5 </td>
             <td>cell 6 </td>
          </tr> 
          <tr>
            <td>cell 7 </td>
             <td>cell 8 </td>
             <td>cell 9 </td>
          </tr>
       </table> 
        Here      tr -- table row  

This will create table in the below format: https://cdn.scotch.io/55044/zJrgO0TKCHn2Rv58YdBA_3-by-3.jpg

HTML Lists: Lists are recommended for small amount of data. Used for ranking of data as well. We have Order Lists and Unorder Lists. Mostly we use Lists.

Synatx of order lists and unorder lists:

              <ul>
                       <li> content </li>
                       <li> content </li>
                        <li> content </li>
               </ul>
This will display as :
                       * content
                       * content
                       * content 

In order to remove or change the bullets we can use style property

list-style-type : none;
list-style-type: square;
<ol>
           <li> content </li>
           <li> content </li>
            <li> content </li>
</ol>
This will display as:
     1. content
     2. content
     3. content   

We can give styling to <li> as well in CSS.

CSS3 Specificity:

  • The universal selector () has no specificity value (0,0,0,0)
  • Pseudo-elements (e.g. :first-line) get 0,0,0,1 unlike their psuedo-class brethren which get 0,0,1,0
  • The pseudo-class :not() adds no specificity by itself, only what's inside it's parentheses.
  • The !important value appended a CSS property value is an automatic win. It overrides even inline styles from the markup. The only way an !important value can be overridden is with another !important rule declared later in the CSS and with equal or great specificity value otherwise. You could think of it as adding 1,0,0,0,0 to the specificity value.**
**Selector **    **Example  **           **Example description  **                            **CSS**
.class             .intro              Selects all elements with class="intro"                    1
#id                 #firstname         Selects the element with id="firstname"                    1
*                     *                Selects all elements                                       2
element             p                 Selects all <p> elements                                    1
ele,ele            div, p             Selects all <div> elements and all <p> elements             1
ele ele            div p              Selects all <p> elements inside <div> elements              1
ele>ele          div > p    Selects all <p> elements where the parent is a <div> element          2

Border style: For border style to apply on web page we should give border-width, border-style, border-color. In other words, border style property specifies what kind of border to display.

Example:
                 border-width : 5px;
                 border-style : solid;
                 border-color : black;

Line-height property : Its used to adjust gap b/w the lines

Example:  
                 line-height : 5px;

HTML a tag: Its used to link one page to another page. <a> defines as hyperlink. By default, links will appear as following in all browsers:

An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red

We can divide the section part in HTML5 using hr tag.

Types of CSS3:

Inline: We use this for giving style to single HTML element. We use style attribute in the HTML element.

Example:
<h1 style="color:Red;">My name is Divya</h1>

Internal: We use this for styling a single HTML page. We give style in <head> section using <style> tag.

Example:
<!DOCTYPE html>
<html>
<head>
      <title> Web Designing  </title>
      <style>
       body {
                 font-family: Arial, Times, Sans-serif;
                 background-color:#ceebfd; 
            }
     </style>
</head>
<body>
     <h1> This is my article on Global Warming  - Article 1 </h1>
         <p> Throughout its long history, Earth has warmed and cooled time and again.
               Climate has changed when the planet received more or less sunlight due to subtle shifts in its orbit, as the atmosphere or surface changed, or when the Sun’s energy varied
        </p>
    </body>
</html>

External CSS: We use this for stying multiple HTML pages. Simple we can say that we can change the look of entire web application with one CSS style sheet

Example: 
<!DOCTYPE html>
<html>
<head>
       <title> Web Designing  </title>
              <link rel = "stylesheet" type ="text/css" href = " styles1.css" > 
</head>
<body> 
           <h1> This is my article on Global Warming  - Article 1 </h1>
                 <p> Throughout its long history, Earth has warmed and cooled time and again.
                        Climate has changed when the planet received more or less sunlight due to subtle shifts in its orbit, as the atmosphere or surface changed, or when the Sun’s energy varied. But in  the past century, another force has started to influence Earth’s climate: humanity.
               </p>
</body>
</html>

Below is the CSS for this

body {
           font-family : arial, sans-serif;
           background-color : #fff5cc;
           }

HTML Iframe: This is used for displaying a web page within a web page. It uses <iframe> tag:

Example:
<iframe src="URL of the page to display in other web page"></iframe>

HTML JavaScript: This helps HTML pages to be more dynamic and interactive. We use <script> tag to describe client-side script.

Example:
<script>
document.getElementById("demo").innerHTML = "Hello Divya! Welcome to JavaScript";
</script>

Javascrpit can change HTML content , style and attributes as well. We use <noscript>for an alternate content for users that do not support client-side script.

HTML Layout Elements:

This is used to divide page into multiple columns .

<header> - Its like header for a web page or a section
<nav> - It contains of navigation links
<section> - Its  section in a web page
<article> - Its an independent self-contained article
<aside> - Its like sidebar for the content aside 
<footer> - Its a footer for a web page or a section

Responsive Means??

A Web page thats similar and good in all the devices like Mobile, Desktop or Tablets is called responsive. We can achive this by using <meta> element in all your web pages.

Example: 
<meta name="viewport" content="width=device-width, initial-scale=2.0">

Media Queries:

We also use Media Queries in responsive web pages. With this we can define completely different styles for different browser sizes.

Example:
<style>
.psv {
  float : left;
  width:60%; /*The width is 20%*/
}

.psv1 {
  float : left;
  width:80%; /*The width is 80%*/
}

/*Use a media query to add a breakpoint at 600px:*/
@media (max-width:600px) {
  .psv, .psv1, {
    width:100%; /*The width is 100%, when the viewport is 600px or smaller*/
  }
}
</style>

If the MAX and MIN width is given in the Example then the icons or text will be displayed in that given MAX - MIN px only. Beyond that or below that the icons or text may disappear.

HTML Entities:

Some characters might mix up alog with the HTML tags. Example: Greater than > , Less than < symbols. character entities are used to display them in reserved characters in HTML. So, for less than we write < to display and for greater than we write > Non-breaking space: ' ' is the common entity which we use. A non-breaking space is a space that will not break into a new line. Mostly we use to display units beside the numbers.

Example: 
10 Km/h
**Advantage** : An entity name is easy to remember.
**Disadvantage **: Browsers may not support all entity names, but the support for numbers is good.

HTML Symbols : We use this for displaying Math signs like Gamma, Beta, Euro, Etc..

HTML Charset : UTF-8 covers all symbols and characters.

Syntax :
<meta charset="UTF-8">

HTML URL Encoding: URL - Uniform Resource Locator is another word of Web address.

  • scheme - the type of Internet service like http or https
  • prefix - domain prefix like www
  • domain - Internet domain name like google.com
  • port - port number at the host like 80
  • path - path at the server like root directory of the website
  • filename - name of a document or file

    http is Common web page and its not encrypted
    https is secured web page and its encrypted.
    ftp is file transfer used for downloading and uploading file.

    HTML Forms: The <form> element Collects input from the user

    Syntax:
    <form>
    form elements
    </form>
    Here the form elements could be textfield, checkbox, radio buttons, etc...

    HTML input element: We use input element in different ways and that depends completely on type attribute.

    Example:
    <input type="text">   A  one-line text input field
    <input type="radio">  A radio button used for selection in many options
  • HTML select element: <select> defines a drop-down list.
  • HTML option element: <option> defines an option that can be selected.
  • HTML textarea element: <textarea> defines a multi-line input field.

HTML5 Form Elements: Following form elements are added in HTML5

<datalist> -- Specifies a list of pre-defined options for input controls
<output>  -- Defines the result of a calculation

Action Attribute: This means the action to be performed when the form is submitted. Usually the data in the web page is sent to server when clicked submit.

Example:
<form action="/page.php"  target = "_blank">
Here, The form data is submitted to server called `"page.php" ` This page contains a server-side script  and if we set target attribute as blank it will open in new window tab. 

The method attribute : Method attribute specifies the HTTP methods GET and POST used when submitting the form data.

Example for GET and POST:  
<form action="/page.php"  method = "get"> 
<form action="/page.php"  method = "post"> 

By default we use GET method to submit the form and the form data will be visible in the page address. We can submit only limited data in the GET method. Never use GET to send sensitive data because the data is not secure.

We use POST for sensitive or personal information. The POST method will not display the submitted form data in the page address. POST has no size limitations, and can be used to send large amounts of data. POST cannot be bookmarked.

HTML input types: We have different input types for input element.

Example: 
<input type="text">
<input type="password">
<input type="reset">
<input type="submit">
<input type="radio">
<input type="checkbox">
Here input is the element and type is the attribute.

HTML5 Input Types: HTML5 added several new input types *color

  • date
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • time
  • url
  • week

HTML input attribute : This means the value of the input text field.

Example: 
readonly 
maxlength
disable
size

Few examples of HTML5 input attribute:

autocomplete
autofocus
formaction
formmethod
formnovalidate
formtarget

Few new HTML5 elements:

article
aside 
dialog 
footer 
header

HTML5 semantics: A semantic gives meaning to both the browser and the developer.

Non-semantic elements: <div> and <span> - Describes nothing about its content.
Semantic elements: <form>, <table>, and <article> - Clearly describes its content.

HTML canvas: Its a plain area on HTML page with no borders and width by default. Example: <canvas id="canvas" width="100" height="150"></canvas>

HTML SVG: SVG means Scalable Vector Graphics. Its used to define graphics for the Web page. HTML svg element is a container for SVG graphics.

Differences Between SVG and Canvas:

  • SVG describing 2D graphics in XML. Canvas draws 2D graphics, only with a JavaScript.
  • SVG is XML based, means that every element is available within the SVG DOM. we can attach JavaScript event handlers for an element.
  • SVG, each drawn shape is saved as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape.
  • Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic.

HTML5 Video: We use video element to insert video in the web page.

Example: 
<video width=120" height="140" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Browser not supporting the video tag.
</video>

HTML5 Audio: We use audio element to insert audio in the web page.

Example: 
<audio controls>
  <source src="lady gaga.mp3" type="audio/mpeg">
  <source src="lady gaga.ogg" type="audio/ogg">
Browser not supporting the audio. 
</audio>

HTML5 Geolocation: getCurrentPosition() is used to give users current position.

HTML5 Web Storage: Two type of web storages

Local Storage - LocalStorage object stores the data and the data will not expire. The data will not be deleted even if browser is closed, and will be available the next day or week.

Session Storage - SessionStorage object is same as localStorage object, thing is that it stores the data only for one session. The data is deleted when the user closes the specific browser tab.

Web Workers: A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. We can continue to do whatever we want like clicking, selecting things, etc., while the web worker runs in the background.

CSS Position: Position of an element. Position properties are static, relative, fixed, absolute and sticky.

Example:
div.a {
    position: static;
    border: 3px solid black;
}

CSS Overflow: This occurs when the text is too big to fit in the specified area. Overflow properties are visible, hidden, scroll, auto. Example:

div {
    width: 100px;
    height: 30px;
    background-color: black;
    overflow: hidden;
}

CSS Float: We use this property to float the element.

CSS Opacity: The transparency of an element. If the value is lower the transparency is more.

Example:
img {
    opacity: 0.5;
}
Here if the opacity is 1.0 then the image is more transparent.

CSS Pseudo Element: Its used to style specific part of element.

CSS Pseudo class: Its used to give the state of the element.

CSS Combinators: Its used to combine more than one selectors.

  • descendant selector (space) - selects all p elements inside a div element
    Syntax: 
    div p {
    color:black;
    }
  • child selector (>) - selects all p elements that are immediate children of div element.
    Syntax:
    div >p{
    color:blank;
    }
  • adjacent sibling selector (+) - selects all p elements that are placed immediately after div elements
    Syntax:
    div + p{
    color:black;
    }
  • general sibling selector (~) - selects all p elements that are siblings of div elements
    Syntax:
    div ~ p{
    color:black;
    }

CSS ToolTip: This gives more information about the element when hover on it.

CSS Image Sprites: Its used to combine one or more images to a single image. By this we can increase the performance of the page.

CSS Counters: Its a CSS property to give numbers to the elements. Some of the CSS counter properties are counter-reset, counter-increment.

Nested Counters: Its a CSS property to give decimal numbering to the sub elements.

CSS3 Rounded Borders: Border-radius property helps in giving rounded borders to the element.

Example:
#c1 {
    border-radius: 20px;
    background: navy;
    padding: 40px; 
    width: 250px;
    height: 100px; 
}

CSS3 Pagination: This helps to give numbers to data if data is more than a single page.

CSS3 Animation: This helps us to give animation to elements without using JavaScript. Means changing one style of the element to other using @keyframes rule.

CSS3 Transition: Means adding effect to the element and the duration of effect to stay on the element.

CSS3 Shadow Effects: Means giving shadow effects to the text and images.

CSS3 2D and 3D Transforms: Means using this we can rotate the element , scale, change shape, translate, etc..

CSS3 Object fit: Its used to define how an <img> or <video> should be resized inorder to fit in its container.

Example:
img {
    width: 100px;
    height: 200px;
    object-fit: cover;
}

CSS3 Box Sizing: Usually the width and height of element is calculated as

width + padding + border = width of the element
height + padding + border = height of the element

In other words when we set the width/height of an element, the element appears bigger than what we have set this is because the element's border and padding are added to the element's specified width/height.

Inorder to control this we use CSS3 Box Sizing. This property includes the padding and border in an element's total width and height. So, use box-sizing: border-box; to achieve this.

Syntax for Box Sizing:
.div x{
    box-sizing: border-box;
}