View
26
Download
0
Category
Tags:
Preview:
DESCRIPTION
So you want to build a website?. Introduction. Class Introduction Why do you want to learn HTML? Is there a project you want to work on?. Introduction (continue) . How we’re going to be developing pages Using Microsoft notepad or any text editor - PowerPoint PPT Presentation
Citation preview
So you want to build a website?
1
Introduction
Class Introduction–Why do you want to learn HTML?– Is there a project you want to work
on?
2
Introduction (continue)
How we’re going to be developing pages– Using Microsoft notepad or any text editor– Viewing pages in class (Explorer / Netscape)– Working from home– Saving work to a disk
3
To Help You Learn HTML Books
– “Teach Yourself HTML 4 in 24 Hours” by SAMS.– “HTML 4 in 21 Days” by Laura Lemay.
4
To Help You Learn HTML Log in from the school website to:
https://sites.google.com/a/americanacademy-casablanca.com/infotmation-communication/
– Check out the Class Notes and Links sections for online links.
– This site is being built ‘as we speak’, so check back often.
5
Our Class Project
Each student will need to build a website that will be presented to the classmate
6
Getting Started
We will be using MS Notepad to write our HTML.
Pages will be saved to your flash drive. Pages will be viewed as they are created
in your browser. We will use this overhead presentation as
well as handouts and the Class website.
7
Basics of the Internet
In the simplest sense, the Internet is a collection of inter-connected computers (servers) over shared lines.
Servers are just like the computers you use at home and work, but more powerful.
The Internet became “browse-able” in the 1990s with the creation of the HTTP protocol and creation of HTML.
8
HTTP & HTML
HTTP – HyperText Transfer ProtocolMethod by which a computer jumps from one page to another by clicking on links.
HTML – HyperText Markup LanguageMarkup language that allows for the formatting of Internet Documents.– Plain Text Language– Universal Compatibility– Most-recent version is HTML 4.0
9
What HTML DoesTurns Text Like This
My name is Jasmine.What is your name?
Formatted Like This<html><head><title>Hello world</title></head><body><b>My name is Jasmine.</b><br><center><i>What is your name?</i></center></body></html>
INTO THIS…
10
11
Practice 1Create your own page:Open Notepad –Start>Programs>Accessories>Notepad
<html><head><title> This is my first web page</title></head><body>Hello world. This is my first web page. There's more to come.</body></html>
[Name your file as firstpage.html]
12
HTML Coding Standards HTML markup takes the form of TAGS
<tag>Marked up text</tag>
Some of these tags have attributes<tag attribute=“value”>Text</tag>
Some tags have opening and closing elements, while some have just opening<center><img src=“image.gif”></center>
13
Basic text formatting
Our next tags are– paragraph, – line break – Headline– horizontal rule
This help us make our current page a lot more exciting. Let’s learn how.
14
Basic Web Page Tags
Each web page has four basic tag sets:Tag Closing Description
<html> </html> Defines the area within as an HTML page.
<head> </head> Contains information about the document.
<title> </title> Identifies the title of the page, contained within the <head> tag.
<body> </body> Surrounds the text of the page.
15
Template For HTML Pages<html><head> <title>Page Title Goes Here</title></head>
<body>Page content goes here.</body>
</html>
16
Adding Text
Adding text is as simple as typing text between the <body> tags, except:– Browsers ignore multiple spaces, spacing only
once unless told otherwise.– Browsers do not know when to start new
paragraphs or break at the end of lines.– Browsers do not know how you wish to format
text.
17
18
19
Paragraphs
The <p> tag tells the browser to insert a new paragraph.– The closing tag for this (</p>) is optional, but
recommended. The <p> tag has one attribute, ‘align’ that
controls the on-page alignment of your paragraph.– Options are left, center, right, justify– This attribute has been Deprecated in HTML 4.0.
20
Line Breaks
To insert a line break, use the <br> tag. Note, that this tag has no closing tag.
Ex. ‘Hello<br>World’:HelloWorld
21
How <p> and <br> Differ
The <br> tag forces a one-line break, while the <p> tag creates a new paragraph with a two-line break.
The <p> tag has an align element (left, center, right, justify) while no such attribute exists in the <br> tag.
22
Text Spacing
Although HTML ignores extra spacing, there is a ‘special character’ in HTML that gives you that functionality: – This is the non-breaking space character, and
adds the ability to have extra spaces to your page. Ex.: ‘There are 3 spaces between this and
this.’:<p>There are 3 spaces
between and this.</p>
23
24
25
Practice 2
Practice the line spacing, linebreak, and paragraph tags
to add formatting and spacingto the document you created.
26
Headline tag
In HTML, bold copy is created by using the headline tag.
There are six levels of headlines, ranging from <h1>…</h1> to <h6>…</h6>.
27
Heading example
Here is an example of the code for all the headline sizes:
<h1>Level 1 Headline</h1><h2>Level 2 Headline</h2><h3>Level 3 Headline</h3><h4>Level 4 Headline</h4><h5>Level 5 Headline</h5><h6>Level 6 Headline</h6>
28
Practice 3 Step 1 Load your text editor and type the following
code:<html><head><title>This is my first web page.</title> </head> <body>Hello world. This is my first web page. There's more to come.</body></html>
29
Step 2 Add the <h1> tag to the words "Hello world." as shown in red.
<html><head><title>This is my first web page.</title> </head> <body><h1>Hello world.</h1> This is my first web page. There's more to come.</body></html>
Step 3 Save the file MyWebPage.html
30
Horizontal Rule
To create a horizontal line on your page you use the empty tag:
<hr>
31
Lists Lists come in a variety of forms with most
either numbered or bulleted. The numbered lists are called ordered lists The bulleted lists are unordered lists. Lists are nested. There is a tag that
identifies the type of list, like numbered or bulleted.
Then within that tag there is another tag that itemizes the list. Maybe some definitions would help.
32
Definitions <ol>…</ol>
The ordered list is a container tag and is used for numbered lists.
<ul>…</ul> The unordered list is a container tag and is used for bulleted lists.
<li>…</li>The listed item tag is a container tag and is nested within the ordered or unordered tags.
33
An ordered (numbered) list
An ordered (numbered) list goes like this:<ol> <li>My first item on the list.</li><li>My second item on the list.</li><li>My third item on the list.</li><li>My fourth item on the list.</li></ol>
In the browser it will appear like this: 1. My first item on the list. 2. My second item on the list. 3. My third item on the list. 4. My fourth item on the list.
34
An unordered (bulleted) list
An unordered (bulleted) list goes like this:<ul> <li>My first item on the list.</li><li>My second item on the list.</li><li>My third item on the list.</li><li>My fourth item on the list.</li></ul>
In the browser it will appear like this: My first item on the list. My second item on the list. My third item on the list. My fourth item on the list.
35
Review 1
All HTML documents should have the primary tags: – <html>…</html> HTML file tag – <head>…</head> General information tag – <title>…</title> Title tag – <body>…</body> Body tag
Headlines come in six sizes: <h1> being the largest and <h6> being the smallest.
36
Review 1 (continue)
To create space between paragraphs use the container paragraph tag: – <p>…</p>
To create a line break use the empty break tag:– <br>
To make a line use the empty horizontal rule tag:– <hr>
37
Review 1 (continue)
Lists are usually numbered or bulleted. HTML lists are nested with the listed item tag nested within the ordered or unordered container tag:
<ol>…</ol> Ordered list tag <ul>…</ul> Unordered list tag <li>…</li> Listed items tag
38
Recommended