getting to know html
DESCRIPTION
pigjhTRANSCRIPT
![Page 1: Getting to Know HTML](https://reader034.vdocuments.net/reader034/viewer/2022042610/5695d5481a28ab9b02a4c0ce/html5/thumbnails/1.jpg)
GETTING TO KNOW HTMLPROF. DAVID ROSSITER
1/17
![Page 2: Getting to Know HTML](https://reader034.vdocuments.net/reader034/viewer/2022042610/5695d5481a28ab9b02a4c0ce/html5/thumbnails/2.jpg)
AFTER THIS PRESENTATIONYou'll be able to build a simple web page
You'll appreciate the use of an HTML editor
2/17
![Page 3: Getting to Know HTML](https://reader034.vdocuments.net/reader034/viewer/2022042610/5695d5481a28ab9b02a4c0ce/html5/thumbnails/3.jpg)
HTML ELEMENTS WE WILL LOOK ATStructure <html> <head> <body>
In <head> <meta> <author>
<style> <link> <script> <base>
In <body> <h1> <p>
3/17
![Page 4: Getting to Know HTML](https://reader034.vdocuments.net/reader034/viewer/2022042610/5695d5481a28ab9b02a4c0ce/html5/thumbnails/4.jpg)
THE HTML SPECIFICATIONHTML is designed by the World Wide Web Consortium (W3C)
The HTML 5 specification ishttp://www.w3.org/TR/html5/
If you are a beginner, don't go there!
4/17
![Page 5: Getting to Know HTML](https://reader034.vdocuments.net/reader034/viewer/2022042610/5695d5481a28ab9b02a4c0ce/html5/thumbnails/5.jpg)
HTML COMMANDSHTML 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
![Page 6: Getting to Know HTML](https://reader034.vdocuments.net/reader034/viewer/2022042610/5695d5481a28ab9b02a4c0ce/html5/thumbnails/6.jpg)
HTML PAGE STRUCTURE<!DOCTYPE html><html>
<head>
. . . header elements go here . . .</head>
<body>
. . . the main web page content goes here . . .</body>
</html>
6/17
![Page 7: Getting to Know HTML](https://reader034.vdocuments.net/reader034/viewer/2022042610/5695d5481a28ab9b02a4c0ce/html5/thumbnails/7.jpg)
A VERY SIMPLE WEB PAGE<!DOCTYPE html><html><head> <title>A Simple Web Page</title> <meta name="author" content="David Rossiter"></head><body> <h1>My Web Page</h1> <p>This web page is so awesome!</p></body></html>
7/17
![Page 8: Getting to Know HTML](https://reader034.vdocuments.net/reader034/viewer/2022042610/5695d5481a28ab9b02a4c0ce/html5/thumbnails/8.jpg)
My Web PageThis web page is so awesome!
8/17
![Page 9: Getting to Know HTML](https://reader034.vdocuments.net/reader034/viewer/2022042610/5695d5481a28ab9b02a4c0ce/html5/thumbnails/9.jpg)
H1 AND PLet's look at main content
<h1> means level 1 heading<h1>My Web Page</h1>
<p> means paragraph<p>This web page is so awesome!</p>
9/17
![Page 10: Getting to Know HTML](https://reader034.vdocuments.net/reader034/viewer/2022042610/5695d5481a28ab9b02a4c0ce/html5/thumbnails/10.jpg)
CODE THAT GOES IN HEADAnything 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>A Simple Web Page</title> <meta name="author" content="David Rossiter">
Obviously, these state the title and author
10/17
![Page 11: Getting to Know HTML](https://reader034.vdocuments.net/reader034/viewer/2022042610/5695d5481a28ab9b02a4c0ce/html5/thumbnails/11.jpg)
OTHER THINGS YOU MIGHT USE IN HEADStyle - later
<style>body backgroundcolor:yellow</style>
<link rel="stylesheet" href="stylerules.css">
Other meta information<meta name="description" content="An example"><meta name="keywords" content="HTML, CSS, JavaScript"><meta charset="UTF8">
11/17
![Page 12: Getting to Know HTML](https://reader034.vdocuments.net/reader034/viewer/2022042610/5695d5481a28ab9b02a4c0ce/html5/thumbnails/12.jpg)
OTHER THINGS YOU MIGHT USE IN HEADScript - later
<script>function surprise() alert("Hello!");</script>
<script src="mycode.js"></script>
The location of the main file<base href="http://www.ust.hk/" target="_blank">
12/17
![Page 13: Getting to Know HTML](https://reader034.vdocuments.net/reader034/viewer/2022042610/5695d5481a28ab9b02a4c0ce/html5/thumbnails/13.jpg)
ATTRIBUTESYou need to use speech marks for any HTML attributes:
<meta name="author" content="David Rossiter">
Double speech marks " and single speech marks ' are both OK: <meta name='author' content='David Rossiter'>
13/17
![Page 14: Getting to Know HTML](https://reader034.vdocuments.net/reader034/viewer/2022042610/5695d5481a28ab9b02a4c0ce/html5/thumbnails/14.jpg)
VIEWING THE HTML OF ANY PAGEFor example: http://www.wikipedia.com
English →
Find Wikipedia in a language: →
A enciclopédia livre890 000+ artigos
Wolna encyklopedia1 136 000+ haseł
Keyboard: Ctrl-U (PC browsers) orU (Mac Chrome, Safari) or U (Mac Firefox)
<!DOCTYPE html><html lang="en" dir="ltr" class="clientnojs"><head><meta charset="UTF8" /><title>Wikipedia, the free encyclopedia</title><meta name="generator" content="MediaWiki 1.26wmf8" />. . .
14/17
![Page 15: Getting to Know HTML](https://reader034.vdocuments.net/reader034/viewer/2022042610/5695d5481a28ab9b02a4c0ce/html5/thumbnails/15.jpg)
THIS PRESENTATIONThis 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
![Page 16: Getting to Know HTML](https://reader034.vdocuments.net/reader034/viewer/2022042610/5695d5481a28ab9b02a4c0ce/html5/thumbnails/16.jpg)
HTML EDITORSThere 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
![Page 17: Getting to Know HTML](https://reader034.vdocuments.net/reader034/viewer/2022042610/5695d5481a28ab9b02a4c0ce/html5/thumbnails/17.jpg)
EXAMPLE OF AN HTML EDITORHere's an example of an HTML editor
This particular editor is called TinyMCEFile Edit Insert View Format Table Tools
Formats - .
p5
17/17