Lecture 2 introduction to html basics

Introduction to HTML
LECTURE 2
COURSE INSTRUCTOR: Raya Idrissa
TheStateUniversityOfZanzibar
1
INF 003: Website Design and Development

The Hypertext Markup Language (HTML)
• Hypertext Markup Language (HTML) is the main markup
language for displaying web pages and other information
that can be displayed in a web browser.
• HTML is the mother of web programming.
• It is written in the form of HTML elements consisting of
tags enclosed in angle brackets (like <html>).
2

Versions of HTML
• There are several different version of HTML
 HTML 1.0, 2.0, 3.2, 4.0, 4.01 and 5
 XHTML 1.0, 1.1, 2.0
• HTML 4.01 and XHTML 1.0 come in different flavours
3

HTMLDocument
• Html file extensions: .html or .htm
• You can create html documents using:
 Notepad in Windows and TextEdit (MAC OS X)
• You can also use HTML Editors such as
 Dreamweaver.
 Front page
 Notepad++
4

Structure of an HTMLDocument
• To build any web page you will need four primary tags:
<html>, <head>, <title> and <body>.
5
<!DOCTYPE HTML>
<html>
<head>
<title>The Hello World Page</title>
</head>
<body>
</body>
</html>

DOCTYPEs
• A DTD, or “Document Type Definition” describes the syntax
to use for the current documentDDD
• What Does the DOCTYPE Declaration (DTD) Do?
 When performing HTML validation testing on a web
page it tells the HTML (Hypertext Markup Language)
validator which version of (X)HTML standard the
web page coding is supposed to comply with.
 It tells the browser how to render the page in
standards compliant mode.
6

DOCTYPEs
• What Happens If the DOCTYPE Declaration (DTD) is
Not Included or is Incorrect?
 You will not be able to use a HTML (Hypertext
Markup Language) Validator to check the page
coding.
 HTML validation requires the DOCTYPE
declaration.
 The browser rending the web page will process the
coding as it would appear in older browsers.
 The stylesheet may not be implemented as planned.
7

HTMLelements
• HTML documents are defined by HTML elements.
• HTML Element Syntax
 An HTML element starts with a start tag / opening
tag
 An HTML element ends with an end tag / closing tag
 The element content is everything between the start
and the end tag
 Some HTML elements have empty content
 Empty elements are closed in the start tag 8

HTMLelements
9
Start tag * Element content End tag *

This is a
paragraph

<a
href="default.htm"
>
This is a link </a>

HTMLAttributes
• Most HTML elements can have attributes
• Attributes provide additional information about HTML elements.
• Attributes are always specified in the start tag
• Attributes come in name/value pairs like: name="value“
• Attribute values should always be enclosed in quotes.
10
<a align="center">This is a paragraph</a>

The Document HEAD
• The head element is a container for all the head elements.
• Elements inside <head> can include:
 TITLE element: The title typically appears in a
Browser's title bar
 Meta tag: Describe metadata within an HTML
document used to describe the content (used by Search
engines)
 Base element : Defines a default address or a default
target for all links on a page
11

The Document HEAD
 Link element : Defines the relationship
between a document and an external
resource
 style Element : Defines style information
for a document
 script tag: is used to define a client-side
script, such as a JavaScript.
12

The Document BODY
• The BODY contains the document itself, i.e., what the user
sees
• Any text (also called character data or cdata) within the
body must be contained within some other tag
13
<!DOCTYPE HTML">
<html>
<head>
<title>OUR FIRST HTML PAGE</title>
</head>
<body>
Your HTML content here
</body>

14
<!DOCTYPE HTML">
<html>
<head>
<title>OUR FIRST HTML
PAGE</title>
</head>
<body>
Your HTML content
here
</body>
</html>

Headings
• Headings are marked with h1, h2, ..., h5 tags
• hn denotes an nth level heading.
• Each successive heading element (i.e., h2, h3, etc.) is
typically rendered in a progressively smaller font.
15

Headings
16
<!DOCTYPE HTML>
<html>
<head>
<title>Headings</title>
</head>
<body>
<h1>Level 1 Heading</h1>
</body>
</html>

Paragraphs
• The P tag is used to enclose a paragraph of text
• Paragraphs appear formatted as you would expected
17
In the case of a private wedding
announcement cards should be mailed the
following day to all relatives and
acquaintances of both the contracting parties.

Evening weddings are no longer the custom,
and the fashionable hour is now high noon

HTMLFormatting Tags
• HTML uses tags like and for formatting output, like
bold or italic text.
18
Formatting Tag Description
 Defines bold text
<big> Defines big text
 Defines emphasized text
 Defines italic text
 Defines small text
 Defines strong text
 Defines subscripted text
 Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text

Line Breaks
• For a quick and dirty line break you can use the BR tag
• Normally you should avoid this
• Why are you breaking the line?
 For a list of items (or menu): use <ul>
 To shorten a line: let the browser wrap it
 For preformatted text: use the <pre> tag
19

Horizontal Lines
• Horizontal lines are used to visually break up
sections of a document.
• The <hr /> tag creates a line from the current
position in the document to the right margin and
breaks the line accordingly.
 This is paragraph one and should be on top 
<hr />
This is paragraph two and should be at bottom

Working with colors
• Color is an important part of any web site
• But color blindness is far more prevalent than most web
designers realize
• There must be sufficient contrast between backgrounds and
text so that the user can read the content
• Colors are displayed combining RED, GREEN, and BLUE
light
21

Working with colors
• HTML colors are defined using a hexadecimal notation
(HEX) for the combination of Red, Green, and Blue color
values (RGB)
• HEX values are specified as 3 pairs of two-digit numbers,
starting with a # sign.
22

HTMLColors
• There are16 Million Different Colors

HTMLColor Names
• The following is a list of some of color names

Example

Color set by using hex value


Color set by using rgb value


Color set by using color name

HTML Tag. Not Supported in
HTML5.
• The tag is not supported in HTML5. Use CSS instead.
• The tag specifies the font face, font size, and color of text.
26
<!DOCTYPE html>
<html>
<body>
This is text!
This is
text
Note: The font element is not
supported in HTML5. Use CSS instead.
</body>
</html>

27

Lecture 2 introduction to html basics

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Lecture 2 introduction to html basics

Similaire à Lecture 2 introduction to html basics (20)

Dernier

Dernier (20)

Lecture 2 introduction to html basics