An introduction by M Hains HTML An introduction by M Hains
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
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
What is HTML? Learning a new language
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
What are web pages made of? Do you speak geek?
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
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?
Behind the web page The structure of HTML Declaration Head Body Tags for marking up content
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
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
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
<HTML> <BODY> </BODY> </HTML> Very basic HTML document <HTML> <BODY> Content with markup goes here </BODY> </HTML>
<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>
How to ‘code’ in HTML Structure and markup in web pages
<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
Let’s try this together now! Time to get our hands dirty! Let’s try this together now! MyFirstWebPage.htm
Please note! Create and save all HTML files created in your “MySite” folder located on your desktop
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
< > Tags/Elements < > Tags/Elements The building blocks of HTML pages and the marking up of text
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
Let’s talk about Tags/Elements <HTML> <HEAD> <TITLE> <BODY> <H1> <H2> <H3> <H5> <H5> <H6> <P> Continued on the next slide
Let’s talk about Tags/Elements <UL> <OL> <LI> <IMG> <TABLE> <TR> <TD> <BR /> <HR /> <B> <I> <A> …and so many more!
Examples of standard tags and their use <P>This is a paragraph</P> This is a paragraph
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
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
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
Examples of standard tags and their use <H1>This is a heading</H1> <HR /> This is a heading
Let’s create some more pages! Building our web site Let’s create some more pages! AboutMe1.htm ContactMe1.htm
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.
Links in web pages Linking to documents, pages or other sites
Basic link syntax The link tag <A> <A HREF=“link goes here”>text goes here</A> Link tag Link Link text Close link
Adding a link to another web site <A HREF=" http://www.google.co.za "> Google SA </A> Hyperlink tag Hyperlinked text Hyperlink tag Link/Address of site/page Example : Visit Google SA for more localised searches.
Adding a link to a document <A HREF=" http://www.MySite.net/Brochure.pdf "> Download our brochure now! </A> Hyperlink tag Hyperlinked text Hyperlink tag Link/Address of document Example : For more info -> Download our brochure now!
Open a blank Notepad document Try it out now Open a blank Notepad document Create a link to Google SA Address is http://www.google.co.za It should look like this <A HREF=“http://www.google.co.za”>Google SA</A>
Time to edit your web site! You’re becoming a web designer now! Time to edit your web site!
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>
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.
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
Folder structure – Important! ROOT FOLDER images scripts documents audio video
Folder structure – Important! ROOT folder {HTML pages here} Sub-folders {for files/images/multimedia etc} images docs scripts audio video stylesheets
Adding images to your web pages Adding images from another folder
Adding an image Correct syntax Correct path is crucial! Remember your folder structure
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
Example <IMG src="images/me.jpg" alt="Matt Hains" width="134" height="134" border="3“>
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>
Lists Ordered (numbered) and unordered
Unordered and Ordered Unordered Ordered Item 1 Standard list Item 2 Numbered Item 1 Item 2 Item 3 Item 1 Item 2 Item 3
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
Ordered list <OL> <LI>Item 1</LI> <LI>Item 2</LI> <LI>Item 3</LI> </OL> Item 1 Item 2 Item 3
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
<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
Faces (typography) Font faces for best compliance Standardised fonts for maximum compatibility Baseline standard Arial Times New Roman Courier New Arial TNR CN BFF!
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!
For more info on fonts and web pages http://www.w3schools.com/cssref/css_websafe_fonts.asp http://web.mit.edu/jmorzins/www/fonts.html
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
Adding color/colour to your text <FONT COLOR=“red”>Colour me red</FONT> ??? Colour me red American spelling…yes…sorry!
16 basic colour names Aqua Black Blue Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow
Example font face and colour <FONT FACE="Arial“ COLOR=“blue”>Colour me blue</FONT> Colour me blue
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
<FONT FACE="Arial“ COLOR=“#FFA500”>Colour me orange</FONT> HTML Colour Codes <FONT FACE="Arial“ COLOR=“#FFA500”>Colour me orange</FONT> Colour me orange
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)
For more on colour values http://www.w3schools.com/html/html_colorvalues.asp
Putting knowledge into practice Now it’s your turn… You are now ready!
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
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
Resources for learning
Resources for HTML editing CoffeeCup Free HTML Editor HTML Kit editor Komodo Edit Amaya Notepad ++ Online HTML editor
Other useful resources HTML Colour Picker Tool online stock.xchng openphoto Free website templates Templates Box
References http://www.w3schools.com http://www.quackit.com/html/tags/ http://images.google.com Computers, Part of your life – Grade 11by Study Opportunities
© 2013 M Hains