Scribd
Upload
6 views40 pages

CH 3 Htmlpart I

The document discusses the basics of HTML markup language. It explains common HTML elements like headings, paragraphs, lists and how they are used to structure a web page. It also covers HTML tags, attributes and the structure of a basic HTML document.

Uploaded by

tayeanimaw7
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views40 pages

CH 3 Htmlpart I

The document discusses the basics of HTML markup language. It explains common HTML elements like headings, paragraphs, lists and how they are used to structure a web page. It also covers HTML tags, attributes and the structure of a basic HTML document.

Uploaded by

tayeanimaw7
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 40

HTML

Objectives

⚫ In this chapter, we’ll create a web page step by step


⚫ Get a sense of what it’s like to mark up a document with HTML tags.
⚫ Learn how markup works, including an understanding of elements and
attributes.
⚫ See how browsers interpret HTML documents.
⚫ Learn the basic structure of an HTML document.

2
Introduction
⚫ Most webpages are plain text files in a language called HTML
(Hyper-Text Markup Language).
⚫ HTML is the standard markup language for documents designed to be
displayed in a web browser
⚫ A markup is a way to annotate the content of a text document
⚫ For example, when studying from a textbook, you might use green
highlighter for key words you know and red highlighter for unfamiliar
keywords
⚫ Highlighting and annotating on documents adds information to them.
⚫ Similarly, a markup language is a language used to add information to
computer documents to help make their structure and content easier to
3
recognize.
Markup language - HTML
⚫ What sort of information can you add to a text document?
⚫ If it’s a web page: Document parts, such as, headings, paragraphs, and
lists …
⚫ HTML is a standard markup language for identifying and describing the
various components of a web document
⚫ The markup indicators in HTML are called “tags”.
⚫ The HTML tags combine to identify document parts and indicate to the
browser how to display them.
⚫ To understand how websites work, and to create your own, you need to
know the basics of HTML.

4
HTML tags
⚫ A tag is a name in angle brackets (< >).
⚫ Most tags come in begin/end pairs, where the end pair just has a /
(forward slash) before the name,
⚫ e.g. <foo> ... </foo>.
⚫ Web browsers do not display the HTML tags, they use the tags to
determine how to display the document
⚫ When the browser follows the HTML instructions and draws something
on the screen, we say that the browser is rendering the HTML.

5
HTML elements
⚫ An element consists of both the content and its markup

⚫ HTML elements are the building blocks of a web page.

6
HTML elements cont’d
⚫ The three main parts of an element are:
1. Opening tag – used to state where an element starts to take effect. The
tag is wrapped with opening and closing angle brackets. For example,
use the start tag <p> to create a paragraph.
2. Content – this is the output that other users see.
3. Closing tag – the same as the opening tag, but with a forward slash
before the element name. For example, </p> to end a paragraph.
⚫ The combination of these three parts will create an HTML element

7
HTML Attributes
⚫ Elements in HTML have attributes
⚫ Attributes are additional information that adjust the behavior of elements
in various ways to meet the criteria that we want.
⚫ For example, with the type attribute on an <input> element, we can
specify what type of data users should enter into a form. We can specify if
the input field is for a number, an email address, or a password.
⚫ <input> <!-- This will simply create a text box on the page.-->
⚫ <input type=“email"> <!-- This will create a text box on the page that is specifically
for entering an email address. The browser will automatically validate the user's
input to make sure that it is a valid email address.-->

8
Minimal skeleton of an HTML5 document:
⚫ <!DOCTYPE html> ⚫ <!DOCTYPE html> identifies that this document is
<html> an HTML5 document
<head>
⚫ <html> element is the root element and it defines
<meta charset="utf-8" />
the whole HTML document.
<title>Page Title</title>
</head> ⚫ <head> identifies a title for the HTML page (which
<body> is shown in the browser's title bar or in the page's
tab)
<h1>This is a Heading</h1>
<p>This is a paragraph.</p> ⚫ The <body> element identifies the document's
body.
</body>
</html> ⚫ The <h1> element identifies a large heading.

⚫ The <p> element identifies a paragraph.


9
<head>…</head>
⚫ The head of an HTML document is the part that is not displayed in the
web browser when the page is loaded.
⚫ It contains information such as the page <title>, links to CSS, and other
metadata (data about the HTML document, such as the author, and
important keywords that describe the document).
⚫ Web browsers use information contained in the head to render the HTML
document correctly
⚫ The <title> element is metadata that represents the title of the overall
HTML document.

10
<meta />
⚫ The <meta> tag defines metadata about an HTML document. Metadata is
data (information) about data.
⚫ <meta> tags always go inside the <head> element, and are typically used
to specify character set, page description, keywords, author of the
document, and viewport settings.
⚫ <meta charset="utf-8" /> specifies the document's character encoding —
the character set that the document is permitted to use.
⚫ utf-8 is a universal character set that includes almost any character from any
human language.
⚫ This means that your web page will be able to handle displaying any language

11
<body>…</body>
⚫ The <body> tag in HTML is used to enclose all of the content that is
displayed on a web page.
⚫ The <body> element contains all the contents of an HTML document,
such as headings, paragraphs, images, hyperlinks, tables, etc.
⚫ It is one of the two required elements of an HTML document, the other
being the <html> tag.
⚫ The <body> tag should be placed after the <head> tag and before the
</html> tag.
⚫ All of the content that is displayed on a web page must be placed between
the <body> and </body> tags.

12
HTML Text Elements

Marking up text
HTML Text Elements
⚫ All text in an HTML document must be enclosed in some sort of element.
⚫ Text that is not contained within tags is called “naked” or “anonymous” text,
and it will cause a document to be invalid.
⚫ It is important to tag elements in a way that most accurately describes the
content’s meaning.
⚫ A semantically marked up document
⚫ ensures your content is available and accessible to most browsing
environments, from desktop computers and mobile devices to assistive screen
readers
⚫ also helps non-human readers, such as search engine indexing programs, to
correctly parse your content and make decisions about the relative importance
of elements on the page
14
Paragraphs

⚫ Paragraphs are the most rudimentary elements of a text document.


⚫ You indicate a paragraph with the p element by inserting an opening
<p> tag at the beginning of the paragraph and a closing </p> tag after
it.
⚫ <p>Hello World</p>

15
Headings
⚫ There are six levels of headings, from h1 to h6.
⚫ <h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>
<h6>Heading6</h6>
⚫ Reading assignment
⚫ https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTM
L/HTML_text_fundamentals

16
Lists
⚫ Lists are used to present list of information in a well formed and
semantic way.
⚫ There are three different types of list in HTML and each one has a
specific purpose and meaning:
⚫ 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 a list of terms and their
descriptions.
17
⚫ You can also place an entire list inside a list item to create nested list.
Unordered List
⚫ Unordered lists are used to mark up lists of items for which the order of
the items doesn't matter.
⚫ To identify an unordered list, it must be marked up with a ul tag.
⚫ The opening <ul> tag goes before the first list item, and the closing tag
</ul> goes after the last item.
⚫ Then, to mark up each item in the list as a list item, it should be enclosed
in opening and closing li tags, as shown in the following example.
⚫ The only thing that is permitted between the start and end ul tags is one or
more list items.
⚫ You can’t put other elements in there, and there may not be any untagged text

18
Example
⚫ <ul>
<li>disc</li>
<li>circle</li>
<li>square</li>
<li>none</li>
</ul>

19
Example
⚫ <ul>
<p>disc</p> <!– invalid -->
<p>circle</p> <!– invalid -->
</ul>

20
Any list can be nested within another list, but it MUST be placed
within a list item
⚫ <ul>
⚫ <li>Fruits
⚫ <ul>
⚫ <li>Apples</li>
⚫ <li>Bananas</li>
⚫ </ul>
⚫ </li>
⚫ <li>Vegetables
⚫ <ul>
⚫ <li>Carrots</li>
⚫ <li>Potatoes</li>
⚫ </ul>
⚫ </li>
⚫ </ul>

21
Ordered List
⚫ Ordered lists are for items that occur in a particular order,
⚫ such as step-by-step instructions or driving directions
⚫ They are marked up similar to unordered lists but they are defined with
the ol tag for “ordered list”.
⚫ The browser automatically inserts numbers starting from 1 before ordered
list item.
⚫ If you want a numbered list to start at a number other than 1, you can use
the start attribute to specify another starting number.
⚫ Example, <ol start=“17”> … </ol>

22
Example
⚫ <ol>
<li>First</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
</ol>

23
Description List
⚫ Description lists are used for any type of name/value pairs, such as,
⚫ terms and their definitions,
⚫ questions and answers, or
⚫ other types of terms and their associated information.
⚫ The whole description list is marked up as a dl tag.
⚫ The content of a dl is a list of dt elements indicating the names, and
dd elements which indicate their respective values.
⚫ The <dl> tag indicates the description list,
⚫ the <dt> tag indicates the term (name), and
⚫ the <dd> tag indicates each respective definition (value).

24
Example
<dl>
<dt> Linotype</dt>
<dd>Line-casting allowed type to be selected, used, then recirculated into the machine
automatically. This advance increased the speed of typesetting and printing dramatically</dd>

<dt> Photocomposition</dt>
<dd>Typefaces are stored on film then projected onto photo-sensitive paper. Lenses adjust the
size of the type</dd>

<dt> Digital type</dt>


<dd>Digital typefaces store the outline of the font shape in a format such as Postscript. The
outline may be scaled to any size for output. </dd>
</dl>

25
Takeaway question
⚫ Write the HTML code for the following page
website
A group of globally accessible, interlinked web pages which have a
single domain name. A webpage is part of a website
webpage
A single document on the web which uses a unique URL. It is a text
file that contains text, images, hyperlinks, and sound
Web Apps
Internet-enabled apps that are accessed through a web browser.

26
HTML Links (hyper link)
● Links are used to navigate from one page to another or to jump to a
specific section within a page using bookmarks.
● <a></a> tag is used in HTML to create links between pages.
– e.g <a href=”www.google.com”>Open Google</a>
– The href attribute specifies the URL of the page the link goes to
– In the above example a user sees the label “Open Google” and
when he/she clicks on the link, it takes them to Google home
page.
● Note: A link does not have to be text. It can be an image or any other
HTML element.
27
Inline text semantics
⚫ <em>…</em>
⚫ used to indicate emphasis in a sentence, such as when you want to stress a
particular word or phrase
⚫ Emphasized text (em) elements nearly always display in italics by default
⚫ <strong>…</strong>
⚫ The strong element indicates that a word or phrase as important
⚫ Strong text elements nearly always display in bold by default.
⚫ Screen readers may use a distinct tone of voice for important content

28
Inline text semantics
⚫ <time>…</time>
⚫ The <time> tag defines a specific time.
⚫ The datetime attribute of this element is used translate the time into a
machine-readable format
⚫ The time element does not render as anything special in any of the major
browsers
⚫ Syntax: <time datetime="YYYY-MM-DDThh:mm:ss"> </time>
⚫ Eg. <time datetime="2011-03-06">Mar 6, 2011</time>
⚫ <abbr>…</abbr>
⚫ The <abbr> tag in HTML is used to define an abbreviation or acronym.
⚫ The title attribute provides the long version of the shortened term

29
Inline text semantics
⚫ <sub>…</sub> and <sup>…</sup>
⚫ The subscript (sub) and superscript (sup) elements cause the selected text to
display in a smaller size, positioned slightly below (sub) or above (sup) the
baseline.
⚫ These tags may be helpful for indicating chemical formulas or mathematical
equations.
⚫ <q></q>
⚫ Use the quotation (q) element to mark up short quotations,
⚫ browsers add quotation marks around q elements automatically, so you don’t
need to include them in the source document

30
Inline text semantics
⚫ <cite></cite>
⚫ The cite tag is used to identify a reference to another document, such as a
book, magazine
⚫ Citations are typically rendered in italic text by default
⚫ <br>
⚫ In HTML, a paragraph always starts on a new line
⚫ but if you want text within a paragraph to start on a new line, you’ll need to
create an HTML line break.
⚫ <p> My name is Abebe Bekele. I am 40 years old.<br> I live in Addis Ababa</p>

31
Comments
⚫ If you want to write something in your code without disrupting how the
browser will display your page, you can write comments.
⚫ They will be ignored by the browser, and are only useful for us humans
who write the code.
⚫ A comment in HTML starts with <!-- and ends with -->
Image, Audio and Video
● Images, audios and videos can be embedded in HTML page using <img>, <audio> and
<video> tags respectively.
– <img src=”a.jpg” alt=”flower” />
– <video height=”200” width:”400” controls>
<source src=”v.mp4” type=”video/mp4”>
<source src="v.ogg" type="video/ogg">
– </video>
– <audio controls>
<source src=”a.mp3” type=”audio/mp3”>
– </audio>

33
TABLE MARKUP

34
HTML Tables
⚫ HTML tables were created for instances when you need to add tabular
material (data arranged into rows and columns) to a web page.
⚫ It may be used to organize calendars, schedules, statistics…
⚫ Tables are made up of rows that contain cells.
⚫ Cells are the containers for content
⚫ Cells contain either
⚫ header information (column names, such as, “Name”) or
⚫ data, which may be any sort of content.
<Table>, the markup that structures content into tables
⚫ The content of every table is enclosed by these two tags :
<table></table>
⚫ The smallest container inside a table is a table cell, which is created
by a <td> tag.
⚫ Each table row starts with a <tr> and ends with a </tr> tag.
⚫ In cases where cells need to be table header cells, we use the <th> tag
⚫ all the content in a table must go in cells, that is, within td or th
elements.
Minimal Table Structure
⚫ There are HTML table tags that semantically mark up rows and columns
of data
⚫ <table>…</table> Tabular content (rows and columns)

⚫ <tr>…</tr> Table row

⚫ <th>…</th> Table header

⚫ <td>…</td> Table cell data

37
Example
<table>
<tr>
<td>Aster Awoke</td>
<td>Kabu</td>
<td>Empire Records</td>
</tr>
<tr>
<td>Michael Jackson</td>
<td>Bad</td>
<td>Sub-pop Records</td>
</tr>
</table>
how many rows and columns will this table have when it is displayed
in a browser?
<table>
<tr>
<th>Name</th>
<th>ID</th>
<th>Year</th>
</tr>
<tr>
<td>Tessema</td>
<td>007</td>
<td>4</td>
</tr>
</table>
Exercise, write the markup for the table below

Name ID Year Approve


d
Alem 007 4 No
Kidist 002 1 Yes
Kebede 005 3 No

You might also like