HTML Lecture 1 - La Trobe University

CSE2WD Web Development 

Introduction to HTML 

The World Wide Web (WWW) 

World Wide Web exists because of the Internet. The World Wide Web (WWW) is an Internet based 

information sharing system using hypertext and multimedia. 

The Internet is an interconnected network of computers that provides many services - email, telnet, 

ftp, Newsgroups, Internet Relay Chat, voice communication and others including the World Wide 

Web. 

The Internet was the result of a USA Department of Defense project from the 1960s that allows 

dynamic routing of data communication in a computer network under the conditions of war – 

communication transmission paths could be damaged or destroyed so messages need to be routed 

via another path. 

The World Wide Web project 

(1989) Tim Berners-Lee proposed a hypertext information system that would make 

documents accessible across the variety of different computer systems being used by 

researchers at CERN (the European Organization for Nuclear Research in Switzerland). 

(1990) Tim Berners-Lee is credited with writing the first web client (browser) and server. 

SGML was available but was considered too powerful and complex for the task. HTML was 

defined using a simplified form of SGML, and integrated with a simple network protocol 

HTTP. 

(1991) CERN launches the Web. 

The Web grew exponentially and made other Internet based information distribution systems 

obsolete. 

Web Server at Bendigo 

(February 1994) The Department of IT [LaTrobe,Bendigo] started running a Web server on 

"ironbark" at Bendigo (first regional institute in Australia to do so, and in the first 10 

nationally!) 

m.sutherland Page 1



HTML – Hyper Text Markup Language 

HTML is the coding language used for writing documents on the World Wide Web. 

HTML stands for Hyper Text Mark up Language. 

The original intention of HTML was to define the structure of a document without specifying 

exactly how a browser should display the document - the browser determines the final presentation. 

The original purpose of HTML was to define document structure, e.g. paragraphs, tables, lists and 

images. 

Although HTML was not originally intended to define how the document should appear when 

displayed, extra features were included that provide some layout and formatting control. It allows 

limited control over the layout and appearance of textual and graphical information. 

The presentation of documents is determined by how the browser "chooses" to display HTML 

elements 

HTML documents are generally delivered over the Internet from a WEB server running on a host 

machine to a WEB client browser running on a workstation (PC). 

m.sutherland Page 2



HTML documents can also be loaded into a browser from the local file system of a workstation 

without the need for a WEB server. eg. HTML documents on CDROM. 

Without a WEB server HTML documents are only available on the local machine (or intra net 

machine sharing the same file system). 

There are three components needed to make information resources available: 

• A scheme for naming and locating resources (URL). 

• Protocols for accessing named resources (eg. HTTP, FTP). 

• Hypertext language for navigation between resources (HTML). 

An information resource could be a document, an image, a sound or video clip, style sheet 

definitions, a java script, java applet or some other resource needed by a WEB document which is 

not stored inside the current document. 

What does HTML provide 

• limited character formatting ( bold, italic and underline) 

• Document structure 

• Lists & tables 

• Inline images 

• Links to other documents and resources 

m.sutherland Page 3



Markup language 

markup 'tags' are used to change the properties of plain text. 

the cow jumped over the moon 

would be rendered (displayed) as: 

the cow jumped over the moon 

• The markup tag for bolding text using HTML is 

• Only the effect of the tag is visible when the text is displayed. 

• All HTML tags start with an left angle bracket < and finish with a right angle bracket>. 

An HTML tag can be either a closed tag or an empty tag. 

Closed tags have a corresponding closing tag to the opening markup tag and affect content between 

the two tags. 

examples: 

this text is highlighted as strong. 

this is bold but this is not 

The closing tag is the same as the opening tag with the inclusion of a "/". 

Empty tags have no closing tag. Eg. 

- horizontal ruler 

- forced line break 

- image 

m.sutherland Page 4



XML - eXtensible Markup Language 

The eXtensible Markup Language is another markup language. 

XML documents must be well formed. 

• All elements must have opening and closing tags 

• Empty elements must be expressed in XML format 

• All elements must be correctly nested 

HTML does not enforce the above three rules 

XML is case sensitive, HTML is not 

All XML based languages require that documents be well formed. Optionally, a document may also 

be validated against a document type definition, or DTD. A DTD defines: 

• The elements, attributes and entities that form the grammar of the mark-up language. 

• Valid document structure. 

m.sutherland Page 5



XHTML – a version of HTML that is compatible with XML 

eXtensible Hypertext Markup Language. 

XHTML has the vocabulary of HTML whilst using the syntax of XML. 

XHTML offers the following advantages: 

• Stricter coding rules allow the document to be more easily read and processed. 

While less convenient for the web developer, a document that is simpler to read 

requires less complicated applications to process it. 

• XHTML assists in separating the content of a document from its presentation. 

Such a separation prevents your valuable content from being mixed with 

presentational data. It allows the document to be used in different contexts more 

easily. 

• XHTML documents may be processed using any XML tool. 

Being XML based, XHTML may be processed by any XML tool, or even converted 

into any other XML based language. 

m.sutherland Page 6



HTML markup tags 

Tags begin with a left pointing angled bracket "" 

eg.. turn on bolding 

HTML tags must have a closing tag 

that uses the same tag name preceded by a / (forward slash) 

eg..this is bold but this is not 

Structure of an HTML document 

An HTML document consists of at least two sections: 

• head 

• body 

There is only one head and one body allowed in a document. 

 

 

Structuring HTML documents 

 

 

Working with Web Pages ( HTML documents ) 

here is the body of the document. It is the information content of 

the document and includes markup tags and links. 

 

 

m.sutherland Page 7



The section: 

the document title is defined by the tag 

Other tags that can be placed in the header are not normally displayed by the browser, they 

provide details about the document, its status, ownership and relationship to other 

documents. 

The section: 

the information content of the document and includes markup tags and links. 

The declaration 

The declaration must be the very first thing in your document, before the 

tag. Then, when the browser begins to load the page, it knows how to treat the code 

within the page. 

The doctype declaration tells the browser what version of (X)HTML is being used so it will 

know how to display the page. The declaration also provides a link to a text file describing 

the document's standard (e.g., the loose DTD) 

 

 

 

replace with your document's title 

 

 

 

 

replace with your document's content 

There are three different document types for HTML 4.01: 

Strict, Transitional, and Frameset. The Strict type is used with Cascading Style Sheets and 

helps to ensure clutter-free coding. 

 

The Transitional type is used when HTML presentational features are included in the 

document instead of in a style sheet. This is done to accommodate older browsers that don't 

support CSS. 

 

The Frameset type is used in documents that have frames. 

 

m.sutherland Page 8



XHTML 

The same three document types are also used in XHTML 1.0: 

 

 

 

Since the declaration is actually a comment tag, it won't confuse older 

browsers that don't understand the statement. 

m.sutherland Page 9



 

Faculty of Science, Technology and Engineering - La Trobe 

University 

the text following the opening title markup tag appears in the title bar of the browser when the page is 

loaded. 

m.sutherland Page 10



Using Markup tags in Web Pages 

• physical (presentational) elements 

• logical (semantical) elements 

o title 

o headings 

o paragraphs 

o tables 

o lists 

o images 

o anchors & links to other documents 




Physical (presentational) tags 

These affect the appearance of text enclosed by the tag. 

• bold 

• italic 

• underline 

• typewriter text 

• preformatted text 

Empty physical style tags: these have no closing tag. 

• start a new line. 

• horizontal line 

• image tag - requires another piece of information about where to 

find the file that stores the image. “src is an attribute” 

 

 

My First Web Page 

 

 

My First Web Page 

 

I hope that you will enjoy visiting this web page 

 

The paragraph Tag 

 

The paragraph tag is used to group a collection of text into a single 

unit. It is possible to align the text within the paragraph to be 

"left", "right" or "center" on the page. 

 

Last Updated 2-Mar-2012 

 

 




The paragraph Tag 

The paragraph tag is used to group a collection of text into a single unit. It is possible to align the 

text within the paragraph to be "left", "right" or "center" on the page. 

.... 

.... 

.... 

align = "center" | "left" | "right" 

Aligns the text between the opening and closing tags to the centre, left or right of the page. 

this text is aligned left 

this text is aligned left 

this text is aligned right 

this text is aligned right 

this text is aligned centre 

this text is aligned center 

Pre-formatted text 

 

text following the pre markup tag is displayed using 

a fixed width font. 

Carriage returns and white space are not ignored. 

Monday Prepare notes set homework 

Tuesday Photocopy handouts confirm no. of attendants 

Wednesday Deliver training go home and rest 

Other markup tags can be embedded into the 

preformatted text. 

eg. 

this is bold and this is underlined

HTML Lecture 1 - La Trobe University

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?