Step by Step HTML5 - pdf

Contents

This tutorial will guide you through the following steps:




pdf Step by Step HTML5


EDITING AND VIEWING HTML FILES

HTML (Hyper Text Markup Language) is the standard markup language used to create web pages. Along with CSS, and JavaScript, HTML is a cornerstone technology, used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.

HTML tag: <html>


All versions of HTML language

VERSION YEAR TAG
HTML 1.0 1991 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
HTML2 1995 <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
HTML3 1997 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
HTML4 1999 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 2000 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML5 2014 <!DOCTYPE html>


How to create HTML file (document)

First of all, you need an editor for coding. We recommend Sublime Text that works in any platform (Windows, Linux, Mac OS X).
When you are finished with the installation of Sublime Text on your PC, then open the program and copy some of the examples code that we have given below.
Further, in the top left corner click "File" and then on "Save as ..." option.
In "File name", type the name of the file that you want, and in the "Save as type" select extension Hyper Text Markup Language - html and and click "Save".
When done, open the document using your browser.

html type


The default character encoding in HTML5 is UTF-8.
<meta charset="UTF-8">

EXAMPLE

Simple code html page

code:


<!DOCTYPE html>
<html>
 <head>
  <title>IT PRESENT</title>
 </head>
 <body>
   <h1>INDEX PAGE</h1>
   <p>text on html page</p>
 </body>
</html>

result:




INDEX PAGE

text on html page



FORMATTING TEXT BY USING TAGS

HTML text formatting tags make certain text on your web pages to appear differently than normal text content.

These are types and examples of formatted text:

<b> This is bold style </b>
<i> This is italics style </i>
<em> This is emphasized style </em>
<strong> This is an important text </strong>
<small> This is small text </small>
<mark> This is marked text </mark>
<del> This is deleted text </del>
<sub> sub </sub>
<sup> superscript </sup>
<u> This is the underlined text </u>
<ins> This is inserted text </ins>




HTML Text Formatting Examples

code:


<p>H<sub>2</sub>SO<sub>4</sub></p>
 <p>2Y+2X<sup>3</sup>=150</p>

result:

H2SO4

2Y+2X3=150


CREATING TABLES

The table is defined using the <table> and </table> tags.
Tables consist of columns and rows that are created using the following tags:

<tr> TABLE ROWS </tr> this tag is used to create rows in a table
<th> TABLE HEADER </th> this tag is used to create table header
<td> TABLE DATA </td> this tag is used to create a table cells for a table data

<caption> TABLE CAPTION </caption> tag defines the caption (or title) of a table. This tag must be inserted immediately after the <table> tag




HTML Tables Examples


 <table>  
<caption><font color="red"> GEOGRAPHICAL OVERVIEW</font></caption>
  <tr>
    <th>country</th>
    <th>capital</th> 
    <th>currency</th>
  </tr>
  <tr>
    <td>America</td>
    <td>Washington</td>
    <td>dollar</td>
  </tr>
  <tr>
    <td>Russia</td>
    <td>Moscow</td>
    <td>ruble</td>
  </tr>
  <tr>
    <td>Germany</td>
    <td>Berlin</td>
    <td>euro</td>
  </tr>
  <tr>
    <td>China</td>
    <td>Beijing</td>
    <td>yuan</td>
  </tr>
  <tr>
    <td>India</td>
    <td>New Delhi</td>
    <td>rupee</td>
  </tr>
</table> 



GEOGRAPHICAL OVERVIEW
country capital currency
America Washington dollar
Russia Moscow ruble
Germany Berlin euro
China Beijing yuan
India New Delhi rupee





 <table border="1">  
<caption><font color="red"> GEOGRAPHICAL OVERVIEW </font> </caption>
  <tr>
    <th>country</th>
    <th>capital</th> 
    <th>currency</th>
  </tr>
  <tr>
    <td>America</td>
    <td>Washington</td>
    <td>dollar</td>
  </tr>
  <tr>
    <td>Russia</td>
    <td>Moscow</td>
    <td>ruble</td>
  </tr>
  <tr>
    <td>Germany</td>
    <td>Berlin</td>
    <td>euro</td>
  </tr>
  <tr>
    <td>China</td>
    <td>Beijing</td>
    <td>yuan</td>
  </tr>
  <tr>
    <td>India</td>
    <td>New Delhi</td>
    <td>rupee</td>
  </tr>
</table> 



GEOGRAPHICAL OVERVIEW
country capital currency
America Washington dollar
Russia Moscow ruble
Germany Berlin euro
China Beijing yuan
India New Delhi rupee





pdf Step by Step HTML5



Privacy Policy