Week 2 Ict 2q

TLE – ICT 10 Module
2nd Quarter – Week 2
BASIC HTML SYNTAX

This unit teaches the basics of HTML coding. In this unit, an emphasis is placed on document content and
structure.
COMMON HTML TAGS
The following are some facts about HTML tags (plus a few facts about XHTML tags too):
 Web pages are just plain text. You can view or edit the source code using any text editor.
 "Tags" provide web browsers with instructions about the web page, such as where to display
images, and how the document is structured.
 Tags are always enclosed in angle brackets: < >.
 Tags are comprised of elements and attributes. An element is an object on a page (such as a

heading, paragraph, or image), and attributes are qualities that describe that element (such as
width and height).
 Tags usually travel in pairs. An opening tag begins a section of page content, and a closing tag
ends it. For example, to markup a section of text as a paragraph, you would open the paragraph
with an opening paragraph tag <p> and close it with a closing paragraph tag </p> (closing tags
always proceed the element with a /).
 A few tags are called non-container tags, because they don't contain any content - they stand alone.
Examples are images and line breaks. XHTML is more strict than HTML, and requires that all
open tags must be closed, even if they're not container tags. Therefore, non-container tags end
in />. For example, the tag for a line break is <br />. HTML does not have this same requirement,
but it's a good habit to get into in case you ever need to code in XHTML.
 Tags in HTML are not case sensitive, but in XHTML all tags must be in lower case. Even when
coding in HTML, you should get in the habit of writing tags in lower case.
 White space is ignored by web browsers. So, if you hit the space bar multiple times within a
document, only one of those spaces will actually be displayed by the browser.
 Tags can be nested. For example:
<div><p>This paragraph is nested inside a division</p></div>
Note that the order of nested tags is important: The container tags surrounding any content should
be symmetrical
DOCTYPE: DEFINING YOUR VERSION OF HTML
Every web page must start with a DOCTYPE declaration. It has to be the very first item on
the very first line of your HTML or XHTML code. This tells browsers what version of HTML the
web page was coded in, which helps them to know how to process the code.
<!DOCTYPE html>
UNDERSTANDING THE FOLLOWING TABLES:
Common HTML tags are presented below, organized into four tables based on their purpose. The first
table includes tags that control the overall structure of the web page. The second and third tables include
tags that mark up the majority of web page content. Container tags (those that contain content) are
presented in the second table, and non-container tags (those that stand alone) are presented in the third
table. The final table contains tags that are used in markup of HTML tables, which are covered in Module
5 of this unit.
DOCUMENT STRUCTURE
Opening
Closing Tag Description
Tag
<html> </html> Opens and closes an HTML document
The first of two main sections of an HTML document. The
<head> </head> <head> section is used to provide information about the
document for use primarily by search engines and browsers.
The title of document. This element is nested inside the <head>
<title> </title> section. In HTML5, this is the only required tag other than the
DOCTYPE declaration.
The second of two main sections of an HTML document. The
<body> </body>
<body> section contains all the content of the web page.
CONTENT (CONTAINER) TAGS
Opening Tag Closing Tag Description

Headings. H1 is the main heading, H2 is
<h1> to <h6> </h1>to</h6>
secondary, etc.
<p> </p> Paragraph
<div> </div> A container for a block of content
A container for in-line content, such as content
<span> </span>
inside a paragraph.
Gives the contained text emphasis (usually
<em> </em>
as italics).
<strong> </strong> Makes the contained text bold.
<a href = "document
</a> Link
location">
<ol> </ol> Ordered (numbered) list
<ul> </ul> Unordered (bulleted) list
List item, must be nested inside a list element
<li> </li>
such as a <ol> or <ul>
 Comment. Anything between these tags is not
displayed on the screen. This is useful for
making notes to yourself or to others who may
view the source code of the web page.
HTML5 SEMANTIC TAGS
HTML5 introduced several new tags called semantic tags. These tags were designed to communicate the
function of blocks of content that were common on many web pages. Prior to HTML5, developers just used
<div> tags for all blocks.
Opening Closing
Description
Tag Tag
Contains introductory content for a page (e.g., a banner), or a section of a
<header> </header>
page.
<nav> </nav> Contains navigation content, such as a website navigation menu.
<main> </main> Contains the main content of the web page.
Contains content that is tangentially related to the main content of the page
<aside> </aside>
(often this is presented in a sidebar).
Contains the footer of a page, or of a section of a page. Typically the footer
<footer> </footer> contains information about the content, such as the author and a copyright
statement.
EMPTY (NON-CONTAINER) TAGS
Tag Description
<br /> Line break.
<img src ="image location" alt="alternate text" /> Inserts an image into a web page.
TABLES
Opening Closing Sample

Description
Tag Tag Attributes
<table> </table> Adds a table
<tr> </tr> Table row (start & end).
When creating a table to display data, use this tag to
differentiate the first row or column of cells as heading cells
scope="row" for all the other cells in the same column or row. Browsers
<th> </th>
scope="col" typically display this element bold and centered within the
table cell. The scope attribute defines whether this is a row
header or column header.
<td> </td> Table data cell.
Use with <th> or <td> elements. Spans cells across
colspan="number"
multiple columns.
Use with <th> or <td> elements. Spans cells across
rowspan="number"
multiple rows.

Week 2 Ict 2q

Uploaded by

Copyright:

Available Formats

Week 2 Ict 2q

Uploaded by

Document Information

Original Title

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

Week 2 Ict 2q

Uploaded by

Copyright:

Available Formats

TLE – ICT 10 Module

2nd Quarter – Week 2

BASIC HTML SYNTAX

COMMON HTML TAGS

 Tags are always enclosed in angle brackets: < >.

 Tags are comprised of elements and attributes. An element is an object on a page (such as a

 Tags can be nested. For example:

<div><p>This paragraph is nested inside a division</p></div>

DOCTYPE: DEFINING YOUR VERSION OF HTML

UNDERSTANDING THE FOLLOWING TABLES:

CONTENT (CONTAINER) TAGS

Opening Tag Closing Tag Description

EMPTY (NON-CONTAINER) TAGS

Opening Closing Sample

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.