Skip to main content

HTML Step to Step Guide

    
                              HTML Introduction                
HTML Example
                                      
<!DOCTYPE html>                                                       
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body> </html>


Example Explained
  • The DOCTYPE declaration defines the document type
  • The text between <html> and </html> describes the web page
  • The text between <body> and </body> is the visible page content
  • The text between <h1> and </h1> is displayed as a heading
  • The text between <p> and </p> is displayed as a paragraph
What is HTML?
HTML is a language for describing web pages.
  • HTML stands for Hyper Text Markup Language
  • HTML is a markup language
  • A markup language is a set of markup tags
  • The tags describe document content
  • HTML documents contain HTML tags and plain text
  • HTML documents are also called web pages

HTML Tags
HTML markup tags are usually called HTML tags
  • HTML tags are keywords (tag names) surrounded by angle brackets like <html>
  • HTML tags normally come in pairs like <b> and </b>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The end tag is written like the start tag, with a forward slash before the tag name
  • Start and end tags are also called opening tags and closing tags
<tagname>content</tagname>


HTML Elements
"HTML tags" and "HTML elements" are often used to describe the same thing.
But strictly speaking, an HTML element is everything between the start tag and the end tag, including the tags:
HTML Element:
<p>This is a paragraph.</p>


Web Browsers
The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages.
The browser does not display the HTML tags, but uses the tags to determine how the content of the HTML page is to be presented/displayed to the user:

HTML Page Structure
Below is a visualization of an HTML page structure:
<html>
<body>
<h1>This a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>


HTML Versions
Since the early days of the web, there have been many versions of HTML:
Version
Year
HTML
1991
HTML+
1993
HTML 2.0
1995
HTML 3.2
1997
HTML 4.01
1999
XHTML
2000
HTML5
2012



HTML Basic Examples
Don't worry if the examples use tags you have not learned.
You will learn about them in the next chapters.
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
Example
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag.
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Links
HTML links are defined with the <a> tag.
Example
<a href="https://thesofworld.blogspot.in/">This is a link</a>





HTML Images
HTML images are defined with the <img> tag.
Example
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">


HTML Headings
Headings are important in HTML documents.
HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
Example
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
Note: Browsers automatically add some empty space (a margin) before and after each heading.

Headings Are Important
Use HTML headings for headings only. Don't use headings to make text BIG or bold.
Search engines use your headings to index the structure and content of your web pages.
Since users may skim your pages by its headings, it is important to use headings to show the document structure.
H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on.
HTML Lines
The <hr> tag creates a horizontal line in an HTML page.
The hr element can be used to separate content:
Example
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>


HTML Links
Links are found in nearly all Web pages. Links allow users to click their way from page to page.
HTML Hyperlinks (Links)
The HTML <a> tag defines a hyperlink.
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document.
When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
The most important attribute of the <a> element is the href attribute, which indicates the link's destination.
By default, links will appear as follows in all browsers:
  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red
HTML Link Syntax
The HTML code for a link is simple. It looks like this:
<a href="url">Link text</a>
The href attribute specifies the destination of a link.
Example
<a href="http://thesofworld.blogspot.in/">Visit SOF WORLD</a>
which will display like this: Visit W3Schools
Clicking on this hyperlink will send the user to W3Schools' homepage.
Tip: The "Link text" doesn't have to be text. It can be an image or any other HTML element.
HTML Links - The target Attribute
The target attribute specifies where to open the linked document.
The example below will open the linked document in a new browser window or a new tab:
Example
<a href="http://thesofworld.blogspot.in/" target="_blank">Visit SOF WORLD!</a>

HTML Links - The id Attribute
The id attribute can be used to create a bookmark inside an HTML document.
Tip: Bookmarks are not displayed in any special way. They are invisible to the reader.
Example
An anchor with an id inside an HTML document:
<a id="tips">Useful Tips Section</a>
Create a link to the "Useful Tips Section" inside the same document:
<a href="#tips">Visit the Useful Tips Section</a>
Or, create a link to the "Useful Tips Section" from another page:
<a href="http://www.w3schools.comhtml_links.htm#tips">
Visit the Useful Tips Section</a>

HTML Images - The <img> Tag and the Src Attribute
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only, and has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.
Syntax for defining an image:
<img src="url" alt="some_text">
The URL points to the location where the image is stored. An image named "boat.gif", located in the "images" directory on "www.w3schools.com" has the URL: http://www.w3schools.com/images/boat.gif.
The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.

HTML Images - The Alt Attribute
The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.
The value of the alt attribute is an author-defined text:
<img src="smiley.gif" alt="Smiley face">
The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

HTML Images - Set Height and Width of an Image
The height and width attributes are used to specify the height and width of an image.
The attribute values are specified in pixels by default:
<img src="smiley.gif" alt="Smiley face" width="42" height="42">
Tip: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load).


HTML Tables
HTML Table Example:
Firstname
Lastname
Points
Jill
Smith
50
Eve
Jackson
94
John
Doe
80
Adam
Johnson
67




HTML Tables
Tables are defined with the <table> tag.
A table is divided into rows with the <tr> tag. (tr stands for table row)
A row is divided into data cells with the <td> tag. (td stands for table data)
A row can also be divided into headings with the <th> tag. (th stands for table heading)
The <td> elements are the data containers in the table.
The <td> elements can contain all sorts of HTML elements like text, images, lists, other tables, etc.
The width of a table can be defined using CSS.
Example
<table style="width:300px">
<tr>
  <td>Jill</td>
  <td>Smith</td> 
  <td>50</td>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
  <td>94</td>
</tr>
</table>



An HTML Table with a Border Attribute
If you do not specify a border for the table, it will be displayed without borders.
A border can be added using the border attribute:
Example
<table border="1" style="width:300px">
<tr>
  <td>Jill</td>
  <td>Smith</td> 
  <td>50</td>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
  <td>94</td>
</tr>
</table>


To add borders with CSS, use the border property:
Example
<style>
table,th,td
{
border:1px solid black;
}
</style>
Remember to define borders for both the table and the table cells.
An HTML Table with Collapsed Borders
If you want the borders to collapse into one border, add border-collapse to your CSS:
Example
<style>
table,th,td
{
border:1px solid black;
border-collapse:collapse
}
</style>

An HTML Table with Cell Padding
Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.
To set the padding, use the CSS padding property:
Example
th,td
{
padding:15px;
}

HTML Table Headings
Table headings are defined with the <th> tag.
By default, all major browsers display table headings as bold and centered:
Example
<table style="width:300px">
<tr>
  <th>Firstname</th>
  <th>Lastname</th> 
  <th>Points</th>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
  <td>94</td>
</tr>
</table>
To left-align the table headings, use the CSS text-align property:
Example
th
{
text-align:left;
}

An HTML Table with Cell Spacing
Cell spacing specifies the space between the cells.
To set the cell spacing for the table, use the CSS border-spacing property:
Example
table
{
border-spacing:5px;
}
HTML Table Tags
Tag
Description
<table>
Defines a table
<th>
Defines a header cell in a table
<tr>
Defines a row in a table
<td>
Defines a cell in a table


HTML Lists
The most common HTML lists are ordered and unordered lists:



HTML Lists
An ordered list:
  1. The first list item
  2. The second list item
  3. The third list item
An unordered list:
  • List item
  • List item
  • List item
HTML Unordered Lists
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items are marked with bullets (typically small black circles).
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
How the HTML code above looks in a browser:
  • Coffee
  • Milk

HTML Ordered Lists
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items are marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
How the HTML code above looks in a browser:
  1. Coffee
  2. Milk

HTML Description Lists
A description list is a list of terms/names, with a description of each term/name.
The <dl> tag defines a description list.
The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name):
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
How the HTML code above looks in a browser:
Coffee
- black hot drink
Milk
- white cold drink
HTML List Tags
Tag
Description
<ol>
Defines an ordered list
<ul>
Defines an unordered list
<li>
Defines a list item
<dl>
Defines a description list
<dt>
Defines a term/name in a description list
<dd>
Defines a description of a term/name in a description list



HTML AttributesHTML HeadingsHTML ParagraphsHTML FormattingHTML CommentsHTML LinksHTML HeadHTML CSSHTML ImagesHTML TablesHTML ListsHTML BlocksHTML LayoutHTML FormsHTML IframesHTML ColorsHTML ColornamesHTML ColorvaluesHTML JavaScriptHTML EntitiesHTML SymbolsHTML CharsetHTML URL EncodeHTML XHTML
HTML5
HTML5 IntroHTML5 New ElementsHTML5 Semantic
HTML5 Forms
HTML5 Input TypesHTML5 Form ElementsHTML5 Form Attributes
HTML5 Graphics
HTML5 CanvasHTML5 SVG
HTML5 Media
HTML5 VideoHTML5 Audio
HTML5 APIs
HTML5 GeolocationHTML5 Drag/DropHTML5 Web StorageHTML5 App CacheHTML5 Web WorkersHTML5 SSE
HTML Media
HTML MediaHTML Plug-insHTML AudioHTML VideoHTML YouTube
HTML Examples
HTML ExamplesHTML QuizHTML5 QuizHTML CertificateHTML5 CertificateHTML Summary
HTML References
HTML Tag ListHTML AttributesHTML EventsHTML CanvasHTML Audio/VideoHTML DoctypesHTML ColornamesHTML ColorpickerHTML ColormixerHTML Character SetsHTML URL EncodeHTML Lang CodesHTTP MessagesHTTP MethodsKeyboard Shortcuts
HTML Forms and Input
HTML Forms
HTML forms are used to pass data to a server.
An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.
The <form> tag is used to create an HTML form:
<form>
.
input elements
.
</form>

HTML Forms - The Input Element
The most important form element is the <input> element.
The <input> element is used to select user information.
An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type text field, checkbox, password, radio button, submit button, and more.
The most common input types are described below.

Text Fields
<input type="text"> defines a one-line input field that a user can enter text into:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
How the HTML code above looks in a browser:
Top of Form
First name: 
Last name: 
Bottom of Form

Note: The form itself is not visible. Also note that the default width of a text field is 20 characters. 

Password Field
<input type="password"> defines a password field:
<form>
Password: <input type="password" name="pwd">
</form>
How the HTML code above looks in a browser:
Top of Form
Password: 
Bottom of Form
Note: The characters in a password field are masked (shown as asterisks or circles).

Radio Buttons
<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
How the HTML code above looks in a browser:
Top of Form
Male
Female


Bottom of Form

Checkboxes
<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>
How the HTML code above looks in a browser:
Top of Form
I have a bike
I have a car
Bottom of Form



Submit Button
<input type="submit"> defines a submit button.
A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input:
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">

</form>
How the HTML code above looks in a browser:
Top of Form
Username: 
Bottom of Form
If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_action.asp". The page will show you the received input.







What is html_form_action.asp?




Comments

Post a Comment

Popular posts from this blog

CSS Tutorial step by step

CSS   Introduction Cascading Style Sheets   (CSS) is a   style sheet language   used for describing the   look and formatting   of a document written in a markup language . While most often used to style   web pages   and user interfaces written in   HTML   and   XHTML . CSS is a cornerstone specification of   the web   and almost all web pages use CSS style sheets to describe their presentation. CSS is designed primarily to enable   the separation of document content from document presentation , including elements such as the   layout ,   colors , and   fonts .   This separation can improve content   accessibility , provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for   table less web design ). It   obvia...
Post a Comment
Read more

TypingPad

TypingPad is a simple  text editor  for  Microsoft Windows  and a basic text-editing program which enables computer users to create documents. It was first released  in 2018, and has been included in  versions of  Microsoft Windows .  Features TypingPad  is a common text-only ( plain text ) editor. The resulting files—typically saved with the  .txt  extension—have no format tags or styles, making the program suitable for editing system files to use in a  DOS  environment and, occasionally, source code for later  compilation or  execution , usually through a  command prompt . It is also useful for its negligible use of system resources; making for quick load time and processing time, especially on under-powered hardware. TypingPad supports both left-to-right and right-to-left based languages. Historically,  TypinfPad offers only the most basic text manipulation functions, such as finding text. ...
Post a Comment
Read more

WIFI Hack in two step by image

1. Open cmd   type netsh wlan show profiles and choose a connected network. 2.  Again type netsh wlan show profiles Discovery key=clear.
Post a Comment
Read more