Introduction to the HTML

Слайд 2

HTML Source Document When you connect to a web page by

HTML Source Document

When you connect to a web page by entering

its URL into the browser
Browser instructs your computer to send a message out over the Internet to the computer specified by that URL requests that it sends back a certain document (HTML source doc)
HTML source doc describes the content and layout of the web page
After your computer receives the html, your browser interprets the html and displays the resulting web page (text/graphics/links etc)
Слайд 3

HTML Source Document HTML source document A text-only document Consists of

HTML Source Document

HTML source document
A text-only document
Consists of (1) actual text,

and (2) tags
A tag is an html code that is enclosed in angel brackets <>; used to lay out the web page.
XHTML is a simple, more standardized version of HTML
XHTML/HTML can be created using a simple text editor like notepad
File extension must be .html or .htm
Слайд 4

Sample HTML HTML Source Firefox display of the html source

Sample HTML

HTML Source

Firefox display of the html source

Слайд 5

HTML, XML, XHTML XML (eXtensible Markup Language): is a set of

HTML, XML, XHTML

XML (eXtensible Markup Language):
is a set of rules

that lets web designers classify their data in a way customized to their needs.
Extendable by creating new types of tags.
XHTML (eXtensible HyperText Markup Language):
A new version of HTML based on XML
Inherits strict syntax rules of XML
Слайд 6

HTML vs. XHTML Some comparisons of HTML vs. XHTML

HTML vs. XHTML

Some comparisons of HTML vs. XHTML

Слайд 7

Composition of a HTML Document An HTML document consists of four

Composition of a HTML Document

An HTML document consists of four main

parts:
the DOCTYPE
the Html
the Head
the Body
Слайд 8

Composition of a HTML Document ... … …

Composition of a HTML Document




/>
...






Слайд 9

Creating HTML

Creating HTML

Слайд 10

HTML Tags/Elements Tags are also called elements An attribute is a

HTML Tags/Elements

Tags are also called elements
An attribute is a special code

that can enhance or modify a tag. They are generally located in the starting tag after the tag name.
Basic syntax for html tags and attr.
  
All tags must be lower case and values of attributes need to be surrounded by quotes
Слайд 11

HTML Tags/Elements Example This is bold text… This text will appear aligned to the center…

HTML Tags/Elements

Example
This is bold text…

This text will appear aligned

to the center…


Слайд 12

tag tag is used to specify keywords that describe a document’s

tag

tag
is used to specify keywords that describe a document’s

contents as well as a short description.
Two necessary attributes – "name" & "content"


Слайд 13

paragraph tag tag The paragraph tag. Used so separate text within

paragraph tag

tag
The paragraph tag. Used so separate text within

a web page.
Container type
Will provide line breaks
Optional attribute : align (not supported in HTML5)


Слайд 14

tag tag Is used for line break Example Contact 6150 Sennott


tag


tag
Is used for line break
Example

Contact
6150 Sennott Square

/> University of Pittsburgh
Pittsburgh, PA 15260


Слайд 15

Headings to Define headers. defines the largest header. defines the smallest

Headings

to


Define headers.

defines the largest header.

defines

the smallest header.
Example

This is header 1

This is header 2

This is header 3

This is header 4

This is header 5
This is header 6

Слайд 16

& tags tag Renders text as emphasized text tag Renders text

& tags

tag
Renders text as emphasized text
tag
Renders text

as strong emphasized text
Example (with smth. missing)
Emphasized text
Strong text

Слайд 17

Commenting Source Code Comments are enclosed in Example This is a

Commenting Source Code

Comments are enclosed in
Example

This is a regular paragraph


What are the reasons for using comments?