Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
34 views

03 Getting To Know HTML

This document is a presentation about HTML that introduces some of the basic elements of HTML including the <html>, <head>, and <body> tags. It provides examples of a simple HTML page structure and tags for headings (<h1>) and paragraphs (<p>). It also discusses what type of information and tags can go in the <head> section including the <title> and <meta> tags. The presentation recommends using an HTML editor to make editing HTML pages easier.

Uploaded by

Pedro Pamplona
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
34 views

03 Getting To Know HTML

This document is a presentation about HTML that introduces some of the basic elements of HTML including the <html>, <head>, and <body> tags. It provides examples of a simple HTML page structure and tags for headings (<h1>) and paragraphs (<p>). It also discusses what type of information and tags can go in the <head> section including the <title> and <meta> tags. The presentation recommends using an HTML editor to make editing HTML pages easier.

Uploaded by

Pedro Pamplona
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

GETTING TO KNOW HTML

PROF. DAVID ROSSITER

1/17

AFTER THIS PRESENTATION


You'll be able to build a simple web page
You'll appreciate the use of an HTML editor

2/17

HTML ELEMENTS WE WILL LOOK AT


Structure

<html> <head> <body>

In <head>

<meta> <author>
<style> <link> <script> <base>

In <body>

<h1> <p>

3/17

THE HTML SPECIFICATION


HTML is designed by the World Wide Web Consortium (W3C)
The HTML 5 specification is
http://www.w3.org/TR/html5/
If you are a beginner, don't go there!

4/17

HTML COMMANDS
HTML commands are called elements
Usually, an element has a start tag and an end tag e.g.
<p> . . . </p>
There are some exceptions, discussed later

5/17

HTML PAGE STRUCTURE


<!DOCTYPEhtml>
<html>
<head>

. . . header elements go here . . .


</head>
<body>

. . . the main web page content goes here . . .


</body>
</html>

6/17

A VERY SIMPLE WEB PAGE


<!DOCTYPEhtml>
<html>
<head>
<title>ASimpleWebPage</title>
<metaname="author"content="DavidRossiter">
</head>
<body>
<h1>MyWebPage</h1>
<p>Thiswebpageissoawesome!</p>
</body>
</html>

7/17

MyWebPage
Thiswebpageissoawesome!

8/17

H1 AND P
Let's look at main content
<h1> means level 1 heading
<h1>MyWebPage</h1>

<p> means paragraph


<p>Thiswebpageissoawesome!</p>

9/17

CODE THAT GOES IN HEAD


Anything in <head> is information about the web page,
and does not usually get shown in the page
Let's look at the two lines in <head>
<title>ASimpleWebPage</title>

<metaname="author"content="DavidRossiter">

Obviously, these state the title and author

10/17

OTHER THINGS YOU MIGHT USE IN HEAD


Style - later
<style>
body{backgroundcolor:yellow}
</style>
<linkrel="stylesheet"href="stylerules.css">

Other meta information


<metaname="description"content="Anexample">
<metaname="keywords"content="HTML,CSS,JavaScript">
<metacharset="UTF8">

11/17

OTHER THINGS YOU MIGHT USE IN HEAD


Script - later
<script>
functionsurprise(){
alert("Hello!")
}
</script>
<scriptsrc="mycode.js"></script>

The location of the main file


<basehref="http://www.ust.hk/"target="_blank">

12/17

ATTRIBUTES
You need to use speech marks for any HTML attributes:
<metaname="author"content="DavidRossiter">

Double speech marks " and single speech marks ' are both OK:
<metaname='author'content='DavidRossiter'>

13/17

VIEWING THE HTML OF ANY PAGE


For example: http://www.wikipedia.com
Aenciclopdialivre

Wolnaencyklopedia

890000+artigos

1136000+hase

English

FindWikipediainalanguage:

Keyboard: Ctrl-U (PC browsers) or


U (Mac Chrome, Safari) or U (Mac Firefox)
<!DOCTYPEhtml>
<htmllang="en"dir="ltr"class="clientnojs">
<head>
<metacharset="UTF8"/>
<title>Wikipedia,thefreeencyclopedia</title>
<metaname="generator"content="MediaWiki1.26wmf8"/>
...

14/17

THIS PRESENTATION
This presentation is written in HTML
The presentation system is called reveal.js
It uses some of the HTML we will learn
You can view the source code to learn more

15/17

HTML EDITORS
There are hundreds of HTML editors (google search!)
They give you a GUI environment to help create HTML
HTML editors are good for complementing learning

16/17

EXAMPLE OF AN HTML EDITOR


Here's an example of an HTML editor
This particular editor is called TinyMCE
File

Edit

Insert

Formats

View

Format

Table

Tools

17/17

You might also like