Download presentation
Presentation is loading. Please wait.
1
An introduction by M Hains
HTML An introduction by M Hains
2
Welcome! Your journey today… Introduction What is HTML?
What are web pages made of? How to ‘code’ in HTML Tags and Elements Links in web pages Folder structure Adding images to your web pages Working with lists Font formatting Resources for learning Resources for HTML editing Other useful resources
3
HTML – Why? Logical thinking Practical patterns for “coding”
Understanding of the backbone of the web-design process Discipline and attention to detail Understand the concepts and principles of good design for a web audience Enhances quality of future developers Path to learning new computer languages
4
What is HTML? Learning a new language
5
HTML HTML stands for Hyper Text Markup Language
HTML is a language for structuring web pages HTML is a markup language Uses tags The tags describe document content HTML documents contain HTML tags and plain text HTML documents are also called web pages
6
What are web pages made of?
Do you speak geek?
7
A typical web page/site consists of
Content Text Multimedia Images Video Sound Links! Lots of ‘em! Embedded objects (Flash, Quicktime, Java applications, etc.) Code
8
How does a browser see this?
HTML document (web page) My First Heading Heading tag My first paragraph. Paragraph tag How does a browser see this?
9
Behind the web page The structure of HTML Declaration Head Body
Tags for marking up content
10
Example structure This is a closing tag. Very important! <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> This is called a tag, or an element
11
What do all those tags mean?
The DOCTYPE declaration defines the document type The text between <html> and </html> describes the web page content and structure for the browser The text between <body> and </body> is the visible page content
12
What do all those tags mean?
The text between <h1> and </h1> is displayed as a heading The text between <p> and </p> is displayed as a paragraph
13
<HTML> <BODY> </BODY> </HTML>
Very basic HTML document <HTML> <BODY> Content with markup goes here </BODY> </HTML>
14
<HTML> <HEAD> </HEAD> <BODY> </BODY>
Basic HTML document with <HEAD> <HTML> Document Title Javascripts Meta Tags Document description Favicon links Keywords <HEAD> Various header content goes here </HEAD> <BODY> Content with markup goes here </BODY> </HTML>
15
How to ‘code’ in HTML Structure and markup in web pages
16
<H1>My first web page</H1>
Basic HTML document with <TITLE> <!DOCTYPE html> <HTML> <HEAD> <TITLE> My very first web page </TITLE> </HEAD> <BODY> <H1>My first web page</H1> <P>Welcome to my first web page</P> </BODY> </HTML> <H1> refers to HEADING size 1 <P> refers to Paragraph
17
Let’s try this together now!
Time to get our hands dirty! Let’s try this together now! MyFirstWebPage.htm
18
Please note! Create and save all HTML files created in your “MySite” folder located on your desktop
19
Save as: MyFirstWebPage1.htm
Let’s work together! <!DOCTYPE html> <HTML> <HEAD> Open up Windows Notepad <TITLE> My very first web page </TITLE> </HEAD> <BODY> <H1>My first web page</H1> <P>Welcome to my first web page</P> </BODY> </HTML> Save as: MyFirstWebPage1.htm
20
< > Tags/Elements
< > Tags/Elements The building blocks of HTML pages and the marking up of text
21
Let’s talk about Tags/Elements
Provide meaning/context to the content in a web browser Mark up the style or structure of content for a web browser to decipher and display correctly Continued on the next slide
22
Let’s talk about Tags/Elements
<HTML> <HEAD> <TITLE> <BODY> <H1> <H2> <H3> <H5> <H5> <H6> <P> Continued on the next slide
23
Let’s talk about Tags/Elements
<UL> <OL> <LI> <IMG> <TABLE> <TR> <TD> <BR /> <HR /> <B> <I> <A> …and so many more!
24
Examples of standard tags and their use
<P>This is a paragraph</P> This is a paragraph
25
Examples of standard tags and their use
<P>This is a paragraph<BR /> which also includes a line break</P> This is a paragraph which also includes a line break
26
Examples of standard tags and their use
<P>This is a paragraph with <B>bold text</B></P> This is a paragraph with bold text
27
Examples of standard tags and their use
<H1>This is a heading</H1> <H2>This is the sub-heading</H2> <P>This is the content text</P> This is a heading This is the sub-heading This is the content text
28
Examples of standard tags and their use
<H1>This is a heading</H1> <HR /> This is a heading
29
Let’s create some more pages!
Building our web site Let’s create some more pages! AboutMe1.htm ContactMe1.htm
30
You need to: Create two more HTML documents from scratch
AboutMe1.htm 3 - 4 paragraphs ContactMe1.htm Provide all your relevant contact details Provide content with basic formatting using what you know up to this point.
31
Links in web pages Linking to documents, pages or other sites
32
Basic link syntax The link tag <A> <A HREF=“link goes here”>text goes here</A> Link tag Link Link text Close link
33
Adding a link to another web site
<A HREF=" "> Google SA </A> Hyperlink tag Hyperlinked text Hyperlink tag Link/Address of site/page Example : Visit Google SA for more localised searches.
34
Adding a link to a document
<A HREF=" "> Download our brochure now! </A> Hyperlink tag Hyperlinked text Hyperlink tag Link/Address of document Example : For more info -> Download our brochure now!
35
Open a blank Notepad document
Try it out now Open a blank Notepad document Create a link to Google SA Address is It should look like this <A HREF=“ SA</A>
36
Time to edit your web site!
You’re becoming a web designer now! Time to edit your web site!
37
document with Windows Notepad
Adding a link to another page <!DOCTYPE html> <HTML> <HEAD> Open up your MyFirstWebpage1.htm document with Windows Notepad <TITLE> My very first web page </TITLE> </HEAD> <BODY> <H1>My first web page</H1> <P>Welcome to my first web page</P> <P><A HREF=“AboutMe.htm”>Check out my About Me page!</A></P> </BODY> </HTML>
38
A note about “nesting” elements
Most tags OPEN and then CLOSE. Pay attention to the order (nesting) <P><A HREF=“xxxx”>Link text here</A></P> What you start with, you end with.
39
Google LOVES links! Another task for you Create a “footer” at the bottom of each of your web pages where you have links to all three pages You can look at Matt’s examples to follow if you like
40
Folder structure – Important!
ROOT FOLDER images scripts documents audio video
41
Folder structure – Important!
ROOT folder {HTML pages here} Sub-folders {for files/images/multimedia etc} images docs scripts audio video stylesheets
42
Adding images to your web pages
Adding images from another folder
43
Adding an image Correct syntax Correct path is crucial!
Remember your folder structure
44
Adding an image <IMG SRC=" MyImage.jpg "> Image paths
Default link <IMG SRC=" MyImage.jpg" WIDTH=“200” HEIGHT =“300” > Link with attributes <IMG SRC=" images/MyImage.jpg" WIDTH=“200” HEIGHT =“300” > Link in sub-folder with attributes
45
Example <IMG src="images/me.jpg" alt="Matt Hains" width="134" height="134" border="3“>
46
document with Windows Notepad
<!DOCTYPE html> <HTML> <HEAD> Open up your MyFirstWebpage1.htm document with Windows Notepad <TITLE> My very first web page </TITLE> </HEAD> <BODY> <H1>My first web page</H1> <P>Welcome to my first web page</P> <P><A HREF=“AboutMe.htm”>Check out my About Me page!</A></P> <IMG src="images/MyImage.jpg" alt=“MarkingUp" width=“400" height=“300“> </BODY> </HTML>
47
Lists Ordered (numbered) and unordered
48
Unordered and Ordered Unordered Ordered Item 1 Standard list Item 2
Numbered Item 1 Item 2 Item 3 Item 1 Item 2 Item 3
49
Unordered list Item 1 Item 2 Item 3
<UL> <LI>Item 1</LI> <LI>Item 2</LI> <LI>Item 3</LI> </UL> Item 1 Item 2 Item 3
50
Ordered list <OL> <LI>Item 1</LI> <LI>Item 2</LI> <LI>Item 3</LI> </OL> Item 1 Item 2 Item 3
51
Unordered list example
<P>Things I want to do before I die</P> <UL> <LI>Eat blue cheese</LI> <LI>Swim with a shark</LI> <LI>Shout “Bokke” at a chess game</LI> </UL> Things I want to do before I die Eat blue cheese Swim with a shark Shout “Bokke” at a chess game
52
<font face="Arial, Helvetica, sans-serif" color="#FF0000">Colour me red</font>
Font formatting <font face="Arial, Helvetica, sans-serif" color="#FF0000">Colour me red</font> <font face="Arial, Helvetica, sans-serif" color="#FF0000">Colour me red</font> Faces
53
Faces (typography) Font faces for best compliance
Standardised fonts for maximum compatibility Baseline standard Arial Times New Roman Courier New Arial TNR CN BFF!
54
Face face Remember to close the <FONT> tag!
Sample font tag Face face <FONT FACE="Arial, Helvetica, sans-serif“>Some random text</FONT> Remember to close the <FONT> tag!
55
For more info on fonts and web pages
56
Font formatting Colour
<font face="Arial, Helvetica, sans-serif" color="#FF0000">Colour me red</font> <font face="Arial, Helvetica, sans-serif" color="#FF0000">Colour me red</font> <font face="Arial, Helvetica, sans-serif" color="#FF0000">Colour me red</font> <font face="Arial, Helvetica, sans-serif" color="#FF0000">Colour me red</font> <font face="Arial, Helvetica, sans-serif" color="#FF0000">Colour me red</font> <font face="Arial, Helvetica, sans-serif" color="#FF0000">Colour me red</font> <font face="Arial, Helvetica, sans-serif" color="#FF0000">Colour me red</font> <font face="Arial, Helvetica, sans-serif" color="#FF0000">Colour me red</font> <font face="Arial, Helvetica, sans-serif" color="#FF0000">Colour me red</font> <font face="Arial, Helvetica, sans-serif" color="#FF0000">Colour me red</font> <font face="Arial, Helvetica, sans-serif" color="#FF0000">Colour me red</font> <font face="Arial, Helvetica, sans-serif" color="#FF0000">Colour me red</font> <font face="Arial, Helvetica, sans-serif" color="#FF0000">Colour me red</font> <font face="Arial, Helvetica, sans-serif" color="#FF0000">Colour me red</font> Font formatting <font face="Arial, Helvetica, sans-serif" color="#FF0000">Colour me red</font> <font face="Arial, Helvetica, sans-serif" color="#FF0000">Colour me red</font> Colour
57
Adding color/colour to your text
<FONT COLOR=“red”>Colour me red</FONT> ??? Colour me red American spelling…yes…sorry!
58
16 basic colour names Aqua Black Blue Fuchsia Gray Green Lime Maroon
Navy Olive Purple Red Silver Teal White Yellow
59
Example font face and colour
<FONT FACE="Arial“ COLOR=“blue”>Colour me blue</FONT> Colour me blue
60
HTML Colour Codes Every colour has a numerical representative reference Hexadecimal value R G B values (3 number references = 6 digits) Eg: Red #FF0000 Green #00FF00 Blue #0000FF White #FFFFFF Black #000000
61
<FONT FACE="Arial“ COLOR=“#FFA500”>Colour me orange</FONT>
HTML Colour Codes <FONT FACE="Arial“ COLOR=“#FFA500”>Colour me orange</FONT> Colour me orange
62
HTML Colour Codes Color Color HEX Color RGB #000000 rgb(0,0,0) #FF0000
#000000 rgb(0,0,0) #FF0000 rgb(255,0,0) #00FF00 rgb(0,255,0) #0000FF rgb(0,0,255) #FFFF00 rgb(255,255,0) #00FFFF rgb(0,255,255) #FF00FF rgb(255,0,255) #C0C0C0 rgb(192,192,192) #FFFFFF rgb(255,255,255)
63
For more on colour values
64
Putting knowledge into practice
Now it’s your turn… You are now ready!
65
Your task Complete your MySite website Update all your pages Include
Lots of marked up, relevant content Tags you have learned today Images (available on the server) Colours (use your colour codes!) Links to other web sites if you know them You should have three web pages MyFirstWebpage1.htm AboutMe1.htm ContactMe1.htm
66
Things to keep in mind Use exact size images OR
Learn how to resize and compress images Use image management software like Picasa for example (see resources folder) Google Image Search is incredibly powerful and very flexible Know your graphics and their properties Jpg Gif Png SVG Bmp
67
Resources for learning
68
Resources for HTML editing
CoffeeCup Free HTML Editor HTML Kit editor Komodo Edit Amaya Notepad ++ Online HTML editor
69
Other useful resources
HTML Colour Picker Tool online stock.xchng openphoto Free website templates Templates Box
70
References http://www.w3schools.com http://www.quackit.com/html/tags/
Computers, Part of your life – Grade 11by Study Opportunities
71
© 2013 M Hains
Similar presentations
