Web Technologies - Chapter 3 of Front end path.pdf

Web Technologies
ITSE 2302
Dr. Moamar Elyazgi

Chapter 3
HTML
Hypertext Markup Language
(Part I)
Dr. Moamar Elyazgi

3.1 Introduction
• HTML stands for Hypertext Markup Language, and it is the most widely used
language to write Web Pages.
• 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. 3

3.2 Standard HTML Document Structure Format
• Although a number of HTML tags have been introduced that markup
how text should be displayed in a browser, a correct HTML
document must always include certain structural tags.
• These tags are<HTML>, <HEAD>, <BODY> and <TITLE>.
• The <HTML> tag should be placed around the document's contents;
this tells the browser that the whole document is written in HTML.
• Like a person, all HTML documents have only one head and one
body.
4

• All the text of the HTML document should be inside either the head
or the body.
• Roughly, the <HEAD> holds information about the document itself,
and the <BODY> holds the information that should be displayed.
• The document's <TITLE> is given in the <HEAD>.
• The title is shown at the very top of the browser (i.e. in the title bar)
— not in the browser window itself.
5

• The standard structure of an HTML document is:
<HTML>
<HEAD>
<TITLE>Text to appear in the title bar of the browser</TITLE>
</HEAD>
<BODY>
The text to appear in the main browser window.
</BODY>
</HTML>
6

• The browser that actually formats the HTML document. But when it displays
text, where does it put the line breaks?
• The browser automatically determines the position of the line breaks. It tries to
fit all of the text into the current window so that the user does not need to do
any horizontal scrolling.
• If the browser window changes size, the browser reformats the document.
• It also ignores extra spaces. If there are two spaces between words in the
HTML file, the browser will display the text in exactly the same way as if there
was only one. Blank lines are ignored in a similar way.
• The browser also tries to correct errors in incorrect HTML (such as HTML
containing overlapping tags).
3.3 HTML Formatting
7
3.2.1 The Browser As Formatter

• The tag <BR> is used to start a new line. <BR>is a standalone tag, that
means there is no closing </BR>tag.
• Note that <BR> does not place a line space between the two lines.
• To do that you need to use the <P> paragraph tag.
• Do not forget to add the end tag </p> although most browsers will
display HTML correctly even if you forget the end tag.
• The tag <pre> defines preformatted text.
• The text inside a <pre> element is displayed in a fixed-width font
(usually Courier), and it preserves both spaces and line breaks.
3.2.2 Paragraphs, Line Breaks and Preformatting
8

• The DOCTYPE declaration defines the document type to be HTML.
• In HTML5 this is written as <! DOCTYPE html>.
• The <!DOCTYPE> declaration helps the browser to display a web page
correctly.
• There are different document types on the web. To display a document
correctly, the browser must know both type and version.
• The doctype declaration is not case sensitive. All cases are acceptable.
• Another set of HTML tags are the headings tags.
• These are <H1>, <H2>, <H3>, <H4>, <H5> and <H6>.
3.2.3 Headings, Horizontal Rules and Meta Tags
9

• The text surrounded by the <H1> tag is displayed in a very large font
size.
• Text surrounded by the <H2> tag is displayed in a slightly smaller
font size, and so on down to the <H6> heading tag.
• The <hr> tag creates a horizontal line in an HTML page.
• The <hr> element can be used to separate content.
• Practical HTML examples in Lab
{first-test, example, view-source, headings, paragraphs, horizontal-
rules, line-breaks, line-breaks}
3.2.3 Headings, Horizontal Rules and Meta Tags
10

• By enclosing words in the tags <b> and </b> we can make characters appear
bold.
• By enclosing words in the tags <i> and </i> we can make characters appear
italic.
• Anything that appears within <u>...</u> element, is displayed with underline.
• Anything that appears within <strike>...</strike> element is displayed with
strikethrough, which is a thin line through the text
{bold, italic, underline, Strike, }
3.2.4 Bold & Italic, superscript & subscript, White space
11

• The <sup> element is used to contain characters that should be
superscript such as the suffixes of dates or mathematical concepts.
• The content of a <sub>...</sub> element is written in subscript; the
font size used is the same as the characters surrounding it, but is
displayed half a character's height beneath the other characters.
• In order to make code easier to read, web page authors often add
extra spaces or start some elements on new lines.
{superscript-and-subscript, white-space}
3.2.4 Bold & Italic, superscript & subscript, White space
12

• There are some text elements that are not intended to affect the
structure of your web pages, but they do add extra information to
the pages — they are known as semantic markup.
• Browsers often display the contents of these elements in a different
way.
• For example,the content of the <em> element is shown in italics,
and a <blockquote> is usually indented.
• The reason for using these elements is that other programs, such
as screen readers or search engines, can use this extra information.
3.2.5 Semantic Markup (Strong & emphasis, Quotations and Others)
13

<strong> : The use of the <strong> element indicates that its
content has strong importance.
• For example, the words contained in this element might be said with
strong emphasis.
• By default, browsers will show the contents of a <strong> element in
bold.
{strong.html}
14

<em>: The <em> element indicates emphasis that subtly changes
the meaning of a sentence.
• By default browsers will show the contents of an <em> element in
italic.
{emphasis.html}
15

Quotation : There are two elements commonly used for marking up
quotations: <blockquote> and <q>
• The <blockquote> element is used for longer quotes that take up an entire
paragraph. Note how the <p> element is still used inside the <blockquote>
element.
• The <q> element is used for shorter quotes that sit within a paragraph.
• Both elements may use the cite attribute to indicate where the quote is from.
{quotations.html}
16

Abbreviations & Acronyms : If you use an abbreviation or an
acronym, then the <abbr> element can be used. A title attribute on
the opening tag is used to specify the full.
• HTML5 just uses the <abbr> element for both abbreviations and
• acronyms.
{abbreviations.html}
17

Citations & Definitions: When you are referencing a piece of work
such as a book, film or research paper, the <cite> element can be
used to indicate where the citation is from.
In HTML5, <cite> should not really be used for a person's name —
but it was allowed in HTML 4, so most people are likely to continue
to use it.
{citations.html}
18

Citations & Definitions:
• <dfn>: The first time you explain some new terminology (perhaps
an academic concept or some jargon) in a document, it is known as
the defining instance of it.
• The <dfn> element is used to indicate the defining instance of a new
term.
{definitions.html}
19

<address>: The <address> element has quite a specific use: to
contain contact details for the author of the page.
• It can contain a physical address, but it does not have to.
• For example, it may also contain a phone number or email address.
{address.html}
20

<div>: The <div> and <span> elements allow you to group
together several elements to create sections or subsections of a page.
• For example, you might want to put all of the footnotes on a page
within a <div> element to indicate that all of the elements within that
<div> element relate to the footnotes.
• You might then attach a style to this <div> element so that they
appear using a special set of style rules.
{div grouping.html}
3.2.6 Grouping Content
21

• Comment is a piece of code which is ignored by any web browser.
• It is a good practice to add comments into your HTML code, especially in complex
documents, to indicate sections of a document, and any other notes to anyone
looking at the code.
• Comments help you and others understand your code and increases code readability.
• HTML comments are placed in between  tags. So, any content placed
with-in  tags will be treated as comment and will be completely ignored
by the browser.
{HTML comments.html}
3.3 HTML – COMMENTS
22

• An attribute is used to define the characteristics of an HTML element and is
placed inside the element's opening tag. All attributes are made up of two parts: a
name and a value:
The name is the property you want to set. For example, the paragraph <p>
element in the example carries an attribute whose name is align, which you can
use to indicate the alignment of paragraph on the page.
The value is what you want the value of the property to be set and always put
within quotations. The below example shows three possible values of align
attribute: left, center and right.
{attributes.html}
3.4 HTML – ATTRIBUTES
23

Web Technologies - Chapter 3 of Front end path.pdf

More Related Content

Similar to Web Technologies - Chapter 3 of Front end path.pdf (20)

Recently uploaded (20)

Web Technologies - Chapter 3 of Front end path.pdf