Scribd
Upload
18 views

Chapter 2.part1

This document provides an introduction and overview of HTML5 structure and formatting. It discusses key HTML concepts like tags, elements, and attributes. It also covers specific HTML elements for headings, paragraphs, line breaks, horizontal rules, emphasis, lists, and comments. The document is intended to teach basic HTML5 skills like creating a webpage using a text editor and viewing it in a web browser.

Uploaded by

ki.to4757
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
18 views

Chapter 2.part1

This document provides an introduction and overview of HTML5 structure and formatting. It discusses key HTML concepts like tags, elements, and attributes. It also covers specific HTML elements for headings, paragraphs, line breaks, horizontal rules, emphasis, lists, and comments. The document is intended to teach basic HTML5 skills like creating a webpage using a text editor and viewing it in a web browser.

Uploaded by

ki.to4757
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 62

Chapter 2- part 1

Introduction to HTML5
Structure and Formatting
Introduction
 HTML5 (HyperText Markup Language 5) specifies the
structure and content of documents that are displayed in
web browsers.
 Web development incorporates a lot of languages and
technologies, but HTML is the foundation. Here we show you
HTML5, the latest incarnation of HTML, and describe how it’s
used to form the basic skeleton of your pages.
 Weintroduce some basics, then cover more sophisticated
HTML5 techniques such as:
tables which are particularly useful for structuring
information from databases
forms for collecting information from web-page visitors
internal linking for easier page navigation
meta elements for specifying information about a
document
HTML Structure
 In order to learn how to write web pages, it is very
important to understand how to structure documents.
 There are three main concepts of HTML:
 Tags
 Elements
 Attributes
HTML Page Structure
HTML Tags
 InHTML, tags act like containers. They tell you something
about the information that lies between their opening and
closing tags.
 HTML tags are element names surrounded by angle brackets:

 HTML tags normally come in pairs like <p> and </p>


 The first tag in a pair is the start tag/open tag, the second
tag is the end tag/close tag
 The end tag is written like the start tag, but with a forward
slash inserted before the tag name
The characters in the brackets indicate the tag's purpose
For example: p stands for paragraph

Open tag/ start tag Close tag/ end tag


HTML Elements
 Strictly
speaking, however, an element comprises the
opening tag and the closing tag and any content that
lies between them.
 AnHTML element usually consists of a start tag and
end tag, with the content inserted in between:

 TheHTML element is everything from the start tag to


the end tag:
HTML Attributes
 All HTML elements can have attributes
 Attributes provide additional information about an
element
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like:
Attributename=“value"

Examples:
 The lang Attribute: The language of the document can
be declared in the <html> tag.
Create your first web page
Using Notepad++
Text Editor: Editing HTML5
 We’ll create HTML5 documents by typing HTML5
markup text in a text editor, like Notepad++, and saving
it with the .html or .htm filename extension.
 Start up Notepad or Notepad++
 Save as .html or .htm
 Open with browser
 If it doesn't look like web page, find the file you just
created on your computer and make sure that it has the
file extension .html (if it is .txt then you need to go back
to Notepad and save the file again)
 It’s important that your filename has no spaces and ends
with the .html extension.

https://notepad-plus-plus.org
Web Browser: Viewing HTML
Docs
 The purpose of a web browser (Chrome, IE, Firefox,
Safari) is to read HTML documents and display them.
 Thebrowser does not display the HTML tags, but uses
them to determine how to display the document.
Looking at site code
 You can look at your or other websites code, by inspect
element or view source code.
HTML documents
 AllHTML documents must start with a document type
declaration: <!DOCTYPE html>
 DOCTYPE declaration tells a browser which version of
HTML the page is using, and helps the browser to render
the page correctly
 Itmust only appear once, at the top of the page (before
any HTML tags).
 The HTML document itself begins with <html> and ends
with </html>
 The visible part of the HTML document is between
<body> and </body>.
Head & Body Sections
Head Section
Contains information that describes the Web page document
<head>
…head section info goes here
</head>
Body Section
Contains text and elements that display in the Web page
document/ The visible part of the document
<body>
…body section info goes here
</body>

14
The HTML <head> Element
 The <head> element is a container for metadata.
 HTML metadata is data about the HTML document.
 Metadata is not displayed.
 <meta> tag is a single tag.
 The <head> element also contains the document title. The
contents of the <title> element is shown in the top of the
browser.
The Heading Element

<h1>Heading Level 1</h1>


<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

16
The <p> tag
Paragraphelement
<p> …paragraph goes here… </p>

◦ Groups sentences and sections of text


together.

◦ Configures a blank line above and below the


paragraph

17
The <br > tag
Line Break element
◦ Stand-alone tag

…text goes here <br >


This starts on a new line….

◦ Causes the next element or text to display on a


new line

18
The <hr > tag
Horizontal Rule element
◦ Stand-alone tag

…text goes here <hr >


This element adds a horizontal line like this:

◦ To create a break between themes — you can


add a horizontal rule between sections

19
Logical Style
Elements
Indicate the logical style of the text display

Common Logical Style Tags


◦ <strong>…</strong>
 To cause text to be emphasized or to "stand out" from surrounding
text. Usually bold.

<strong>This is important</strong>

◦ <em>…</em>
 To cause text to be emphasized in relation to other text on the
page. Usually italics.

<em>Please note</em>
20
Physical Style Elements
 Provide browser font configuration info
◦ Useful for browsers – but not always applicable for other devices or user
agents such as screen readers

 Common Physical Style Tags


◦ <b>…</b>
 To display as bold text
<b>This is important</b>

◦ <i>…</i>
 To display text in italics
<i>Please note</i>

◦ <u>…</u>
 To display as underlined text
<u>This text will be underlined</u>
21
<sup> and <sub> Elements
◦ <sup>…</sup>
 The <sup> element is used to contain characters that
should be superscript such as raising a number to a
power such as x2.
x <sup>2</sup>

◦ <sub>…</sub>
 The <sub> element is used to contain characters that
should be subscript. It is commonly used with foot
notes or chemical formulas such as H20.
H <sub>2</sub> O

22
Special Characters
 Display special characters such as quotes, copyright symbol,
etc.

Character Code
© &copy;
< &lt;
> &gt;
& &amp;
“ &quot;
space &nbsp;

23
Comments and <div> tags
 To insert a comment into your code, use the comment tag
<!-- YOUR COMMENT HERE -->,

• The <div> tag defines a division of the page, and is used to


group content together. Any type of content can be placed in
a div tag, and it is not necessary that it should be
semantically related. <div> tags are commonly used when
many elements are required to have the same format. When
using a <div> tag, note that browsers will insert a line break
before and after the element.

Example:
<div>
<h1>This is a heading in a div element</h1>
<p>This is some text in a div element.</p>
</div> 24
Summary
 HTML pages are text documents.
 HTML uses tags (characters that sit inside angled
brackets) to give the information they surround special
meaning.
 Tags are often referred to as elements.
 Tags usually come in pairs. The opening tag denotes the
start of a piece of content; the closing tag denotes the
end.
 Opening tags can carry attributes, which tell us more
about the content of that element.
 Attributes require a name and a value.
 To learn HTML you need to know what tags are
available for you to use, what they do, and where they
can go.
HTML Lists
Types of lists:
Unordered lists generally contain bullet points. They’re used
when the order of elements in the list isn’t important.
Ordered lists usually have some kind of numeric counter
preceding each list item.
HTML Unordered Lists
 An unordered list starts with the <ul> tag.
 Each list item is placed between an <li> and </li> tag, Li stands for list item.
 The list items will be marked with bullets (disc) by default.
 Browsers indent lists by default.
HTML Unordered Lists
 The type html attribute in the <ul> open tag is used to define
the style of the list item marker (the type of bullet point).
 Can also be defined using CSS list-style-type property with
the same following values:
HTML Unordered Lists
HTML Ordered Lists
 An ordered list starts with the <ol> tag.
 Each list item starts with the <li> tag.
 The list items will be marked with numbers by default.
HTML Ordered Lists
 Sometimes you may see a type attribute used with the element to specify the
type of numbering (numbers, letters, roman numerals and so on).
 It is better to use the CSS

 The type attribute of the <ol> tag, defines the type of the list item marker:
HTML Ordered Lists
 Numbers
HTML Ordered Lists
 Uppercase Letters
HTML Ordered Lists
 Lowercase Letters

 Uppercase Roman Numbers Lowercase Roman Numbers

i
HTML Ordered Lists
 The start attribute of the <ol> tag, defines where the counting should start.
 The value of the start attribute is always a number, for example we don’t say
start=“B” for an uppercase letters list.

Type Start value, as an example First counting start with:

When type=“1” Start=“2” 2


When type=“A” Start=“2” B
When type=“a” Start=“3” c
When type=“I” Start=“2” II
When type=“i” Start=“4” iv
HTML Nested Lists
 Ordered and Unordered Lists can be nested (lists inside another list):

Browsers display
nested lists indented
further than the
parent list.
In nested unordered
lists, the browser will
usually change the
style of the bullet
point too.
Notice that the </li> closing tag that contains the nested list, comes after the closing tag of the nested
list itself (</ul>), as the whole list is considered as a content of this item.
Exercise
Write the HTML code that creates the
following list:
Summary
Ordered lists use numbers or letters.
 Unordered lists use bullets.
Lists can be nested inside one another.
HTML Navigation
Hyperlinks
HTML - HyperText
 Links are the defining feature of the web because they allow
you to move from one web page to another — enabling the
very idea of browsing or surfing
 A hyperlink references or links to other resources, such as
HTML5 documents and images.
 Web browsers typically underline hyperlinks text and color
them blue by default.
 In HTML, links are defined with the anchor <a> tag.

◦ Text between the <a> and </a> is displayed on the web


page.
◦ href attribute: Specifies a hyperlink reference to a
resource’s location, such as:
 a web page or location within a web page
 a file
 an e-mail address
HTML Links
 Example:
Usability
 Your link text (element content – can be a text or image or
anything -) should explain where visitors will be taken if they
click on it
 For
example, rather than write "places to stay" you could use
something more specific such as "hotels in Amman."
The value of href Hyperlink types
attribute is what
define what type of
navigation/hyperlin
k is created.

External link Internal link Link to email


Always direct the user to Always allow the user to send
a new page (bookmark) an email

Navigate in the same


page
Absolute Relative
Always moves the user
to a point in same page

Navigate to hosted Navigate to Can also direct the


page outside your different pages in user to a specific
website(domain) same location in the new
(full URL) website(domain) page
HTML External Absolute links
Linking to another website
 The value of the href attribute is the page that you want people to go to
when they click on the link.
 Users can click on anything that appears between the opening tag <a> and
the closing tag </a> and will be taken to the page specified in the href
attribute.
 When you link to a different website, the value of the href attribute will be
the full web address for the site, which is known as an absolute URL.

An absolute URL starts with the domain name


for that site, and can be followed by the path to
a specific page.
e.g. https://www.google.com
or https://www.google.com/index.html
 When HTML Links
a URL does not indicate a specific document on the website, the web
server returns a default web page. This page is often called index.html, but
most web servers can be configured to use any file as the default web page
for the site.
 Ifthe web server cannot locate a requested document, it returns an error
indication to the web browser (known as a 404 error), and the browser
displays a web page containing an error message.
HTML External Absolute Links-example
HTML Email Links

 Anchors can link to an e-mail address using a mailto: email address as the
value of the href attribute
 When a user clicks this type of anchored link, most browsers launch the
default e-mail program (e.g., Microsoft Outlook or Apple Mail) to enable
the user to write an e-mail message to the linked address.
HTML Email Links-example
HTML Internal Link/Bookmark
Link to specific part of the same page

 At the top of a long web page, you might want to add a list of contents that
links to the corresponding sections lower down. Or you might want to add a
link from part way down the page back to the top of it to save users from
having to scroll back to the top.
 Before you can link to a specific part of a page, you need to identify the

points in the page that the link will go to (create the bookmark). You do this
using the id attribute. Then add a link to it.

 The value of the id attribute should start with a letter or an underscore


 no two id attributes should have the same value
 but the value of the href attribute starts with the # symbol, followed by the

value of the id attribute


HTML Internal Links-example
 Example:
 create a bookmark with the id attribute:

 add a link to the bookmark ("Useful Tips Section"), from within the same
page:
HTML External-Relative Links
 When you are linking to other pages within the same site, you do not need to
specify the domain name in the URL. You can use a shorthand known as a
relative URL.
 Relative URLs help when building a site on your computer because you can
create links between pages without having to set up your domain name or
hosting
 This
is how the user actually navigate inside a website containing many
pages.

Relative URLs : These are like a shorthand


version of absolute URLs because you do not
need to specify the domain name
How to create External Relative hyperlink
 First, create the HTML page you want to link with your current page.

 Save it in same directory as your current page.

 “aboutus.html” is a page you should create and link it to your current


page.
Directory structure
 On larger websites it's a good idea to organize your code by
placing the pages for each different section of the site into a
new folder. Folders on a website are sometimes referred to as
directories.
 The top-level folder is known as the root folder.
 The root folder contains all of the other files and folders for a
website
 The main homepage of a site written in HTML (and the
homepages of each section in a child folder) is called
index.html. Web servers are usually set up to return the
index.html file if no file name is specified.
 When you are linking to a page on your own website, you do
not need to specify the domain name. You can use relative
URLs which are a shorthand way to tell the browser where a
page is in relation to the current page

 If
you link to the same page from two different pages you
might, therefore, need to write two different relative URLs.
Depends on from which web page the link is being added.
Directory structure
Some Relative link types

Same folder: Child folder: Parent folder:


If all the pages of the For a child folder, Use ../ to indicate
site are in the same
folder/directory, then use the name of the the folder above the
the value of the href child folder, current one, then
attribute is just the followed by a follow it with the
name of the file. forward slash, then file name
the file name
HTML External-Relative Links with bookmark
Link to specific part of another page
 As long as the page you are linking to has id attributes that identify specific
parts of the page, you can simply add the same syntax to the end of the link
for that page.
 Therefore, the href attribute will contain the address for the page (either an
absolute URL or a relative URL), followed by the # symbol, followed by the
value of the id attribute that is used on the element you are linking to.
 From previous example :
 Add a link to the bookmark ("Useful Tips Section"), from another page:
HTML External-Relative Links with bookmark
 You can jump to a specific location in the “aboutus.html” page, using the id
attribute as in the internal link.

 #id1: is an id value of one of the html elements in “aboutus.html” page

 Note:in order to notice the effect, the vertical scroll bar of “aboutus.html”
page should be enabled (i.e., has large content)
Open links in a new window
 By default, the page in href attribute is being loaded over the same page
(use the same browser tab), to change that use a target attribute.
 Ifyou want a link to open in a new window, you can use the target attribute
on the opening <a> tag. The value of this attribute should be _blank.
 Generally, you should avoid opening links in a new window, but if you do, it
is considered good practice to inform users that the link will open a new
window before they click on it.
HTML Link Colors – change default style
Bydefault, a link will appear like this (in all browsers):
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red

You can change the default colors, by using CSS styles:


 We will cover this in the CSS part.
Navigational Elements

 The <nav> element is used as a way to group navigational elements


which are used to move between pages, such as the navigation bar
typically found at the top of websites.

 The<nav> tag is a convenience tag which does not alter the


appearance on webpages. However, it is useful in styling all
navigational elements, as well as omitting the content for certain
functionalities, such as with screen readers.

59
Example

60
Summary
Links are created using the <a> element.
 The <a> element uses the href attribute to indicate the
page you are linking to.
 If you are linking to a page within your own site, it is
best to use relative links rather than qualified URLs.
 You can create links to open email programs with an
email address in the "to" field.
 You can use the id attribute to target elements within a
page that can be linked to
Exercise
Write the HTML code that creates the following content:

Link to a
wiki page

Link to send
you an email

You might also like