HTML Web Deveopment Interns Training

Hypertext Markup Language
HTML stands for Hypertext Markup Language, and it is the most widely used language to
write Web Pages.
• Hypertext refers to the way in which Web pages (HTML documents) are linked together.
Thus, the link available on a webpage is called Hypertext.
• As its name suggests, HTML is a Markup Language which means you use HTML to
simply "mark-up" a text document with tags that tell a Web browser how to structure it to
display.
Originally, HTML was developed with the intent of defining the structure of documents like
headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information
between researchers. Now, HTML is being widely used to format web pages with the help of
different tags available in HTML language.
Basic HTML Document

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>

</head>
1
<body>
Page

Peace Solutions
</body>
</html>
HTML Tags
As told earlier, HTML is a markup language and makes use of various tags to format the
content. These tags are enclosed within angle braces . Except few tags, most of the tags have
their corresponding closing tags.
Above example of HTML document uses the following tags:

<DOCTYPE> - This tag defines the document type and HTML version.
<html> - This tag encloses the complete HTML document and mainly comprises of
document header which is represented by <head> ... </head> and document body which is
represented by <body> ... </body> tags.
<head> - This tag represents the document's header which can keep other HTML tags like
<title>, <link> etc.
<title> - The <title> tag is used inside the <head> tag to mention the document title>
<body> - This tag represents the document’s body which keeps other HTML tags like <h1>,
<p> etc.
<h1> - This tag represents heading.
<p> - This tag represents the paragraph.
Heading Tags
Any document starts with a heading. You can use different sizes for your headings. HTML
also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4> , <h5>,
<h6>. While displaying any heading, browser adds one line before and one line after that
heading.
Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of
text should go in between an opening <p> and a closing </p> tag.
2
Page
Peace Solutions
Line Break Tag
Whenever you use the <br /> element, anything following it starts from the next line. This tag
is an example of an empty element, where you do not need opening and closing tags, as there
is nothing to go in between them.
The <br /> tag has a space between the characters br and the forward slash. If you omit this
space, older browsers will have trouble rendering the line break, while if you miss the
forward slash character and just use <br> it is not valid in XHTML
HTML Table
A table is a structured set of data made up of rows and columns (tabular data). A table allows
you to quickly and easily look up values that indicate some kind of connection between
different types of data.
• <table></table>: The <table> wrapper element tells the browser that the content is a
table.
• <tr></tr>: The <tr> element establishes a table row. This allows the browser to
organize any content between the <tr> and </tr> tags in a horizontal fashion; that is,
in rows.
• <td></td>: The <td> element defines the table data cell or each individual “box” for
content within the row. Only use as many <td> table cells as needed for actual data.
Don’t use empty <td> cells for white space or padding — use CSS instead.
• <caption></caption>: The <caption> element allows you to give the table data a
caption. Most browsers will center the caption and render it the same width as the
table by default.
• <th></th>: The <th> element defines the content as table headings for each table
section, which can be a column, a row, or a group of cells. This is useful not just to
help semantically describe the function of the content, but it also helps render it more
accurately in a variety of browsers and devices. The <th> element is used in a row
just like a <td>, and browsers typically render its content bold and centered in the
data cell.
• The <thead>, <tbody> and <tfoot> elements: These define the table’s header, body,
and footer, respectively. Unless you are coding a really complex table with many
columns and rows of data, using these may be overkill. In a complex table, however,
they can add useful structure for the developers, and also for browsers and other
devices.
• The colspan and rowspan attributes: The colspan attribute creates a table cell that
spans more than one column. Here, we wanted the footer table cell to span the whole
3
Page
width of the table, so we told it to span four columns across a row. Alternately, you
Peace Solutions
can add a table cell rowspan attribute that will allow the table cell to span a number
of rows down a column, for example <td rowspan="3">.
• The summary attribute: This attribute is used to define a summary of the table
contents, primarily for use by screenreaders (you won’t see it in the rendered version
of the table above). Note that in the older W3C recommendations, WCAG 1.0 and
HTML 4.0, you can use the summary attribute as detailed above. In newer drafts of
the specs, however, the summary attribute is not mentioned. Whether to still use
the summary attribute seems undecided, so for now let’s say that it is safe to still use
it. After all, it doesn’t cause anything to break, and it confers accessibility advantages.
• The scope attribute: You may also have noticed the scope attributes in the th tags, and
the fact that we have defined the volcano names as headings as well, inside the data
rows! The scope attribute can be used in the th element to tell screen readers that
the th content is the title for a column or a row.
HTML List
Lists are used to group together related pieces of information so they are clearly associated
with each other and easy to read. In modern web development, lists are workhorse elements,
frequently used for navigation as well as general content.
Lists are good from a structural point of view as they help create a well-structured, more
accessible, easy-to-maintain document. They are also useful because they provide specialized
elements to which you can attach CSS styles. Finally, semantically correct lists help visitors
read your web site, and they simplify maintenance when your pages need to be updated.
The three list types
There are three list types in HTML:
• unordered list — used to group a set of related items in no particular order

• ordered list — used to group a set of related items in a specific order
• description list — used to display name/value pairs such as terms and definitions
Each list type has a specific purpose and meaning in a web page.
HTML links
Links are parts of an HTML document that point to other resources — other HTML
4
documents, text files, PDF files, etc. Some links are followed automatically by the browser,
Page
created using <link> elements (you’ve already encountered some of these in earlier articles,
Peace Solutions
as when they were used to import CSS files into an HTML document). But generally, when
we talk about links we mean those that are created by the page author and are optional for the
user to activate. These are called anchors, and you add them to the HTML document using
the <a> element.
The anchor tag has several attributes you can add:
• href — the resource the link points to (either an external file or an anchor ID).
• id — a unique identifier for the link, useful for styling a link with CSS or referencing
it with JavaScript. You can also use an id attribute to make a link into a page anchor,
and link to it from other <a> elements.
• class — a CSS class name to apply to the link, useful if, for example, if you want to
style certain links on the page but not others.
• title — extra information about the link that the browser should display on hover.
Images in HTML
Adding an image to an HTML document is very easy using the <img> element: you
specify the location of the image you want to display as the value of the src (source)
attribute, and away you go. The following HTML document displays the photo
balconyview.jpg in a browser (provided that the image is in the same folder as the
HTML file). 5
Page
Peace Solutions
6
Page
Peace Solutions

HTML Web Deveopment Interns Training

Uploaded by

Copyright:

Available Formats

You might also like

HTML Web Deveopment Interns Training

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Web Deveopment Interns Training

Uploaded by

Copyright:

Available Formats

Hypertext Markup Language

Basic HTML Document

Above example of HTML document uses the following tags:

The three list types

There are three list types in HTML:

• unordered list — used to group a set of related items in no particular order

The anchor tag has several attributes you can add:

You might also like