Embed Size (px)
DESCRIPTION
Carl from Web Courses Bangkok takes you through what makes up HTML, where did it come from, how to write it and some important things to remember when choosing your file names.
Citation preview
Web Courses
Grow your ideas with:
Bangkok
www.WebCoursesBangkok.com
What is HTML?
<HTML>
HowTo MakeLove
What is HTML?The code we use
to create web sites
• Made public by Tim Berners-Lee in late 1991
• Hyper Text Mark-up Language• Not a complicated programming
language• Easy to write and understand• Interpreted by a browser to display
content• Made up of <tags> like <p> and <h1>
Right Click View Source• Where to find HTML
– Right click on your browser and “View Source”
• Finding out how things are done• Can I just copy everyone’s code?• There’s more to a web site than just the
HTML• Judging other Web Sites• Finding problems
Tags are the key to HTML. I code <h1> and the browser
shows me a heading.Ohh…tell me more!
The Core of HTML
<start>middle</end>but sometimes just
<end />
Show me an example…
There is a story!
The story of HTML tags
How to write them, think about them
and understand them.
• <start>middle</end> VS <block />– <p>This is some text</p>– <img /> <br /> <hr />
• Tags names are related their purpose– <img> = Image -– <p> = Paragraph
• Popular Tags– <html><head><title><body>– <h1><h2><p><a><img><ul><li>
• Nested tags– <p>I said <strong>STOP!</strong></p>
<strong>Vs
<b>
HTML has meaning. This meaning is called “semantic value”.
<strong> has more semantic value than <b>
That’s why we don’t use <b> anymore!
<strong> is the winner!
The more semantic value you give your HTML the better Search Engines understand what you are trying to say i.e betterSearch Engine Optimisation
Tags we use a lot
These tags can be found on every web page. You just need
to right click view sauce to find
them…
<body> = Everything within this tag we see on the page<head> = Contains information about the page<title> = Seen on browser tab and search results
<p> = Paragraph, use for normal text<a> = Anchor Link i.e Hyper Links<h1> = Main page heading, used only once<h2>-<h6> = Sub headings within text<img> = Images, durr!<ul> = Un-Ordered list i.e. bullet point lists<ol> = Ordered Lists – i.e. numbered points<li> = List Items, the actual list items<table>, <tr><td> = Tables, Rows, Cells/Columns<strong> = Bold text and <em> = Italic Text
<div> = Division, a section of the page content<header> & <footer> = I will leave up your imagination
Some tags need attributes to work e.g. <img> and <a>.
How do we add attributes?
What are attributes?
<img src=“dsc0001.jpg” alt=“facebook” />
How do we add attributes?
Example Images
<a href=“about.html”>About me</a>
Great but how do I goto a new page?
What about links?
<a href=“about.html” target=“_new”>About me</a>
Great but how do I goto a new page?
What about links?
Clean Readable Code
These tags can be found on every web page. You just need
to right click view sauce to find
them…
Right Tag Right Place<h1> = main page heading<h2> = page sub title<p> = page text NOT = <p>I want to make this <h1>BIG</h1></p>
Start your tag, end your tag, add detail1. <h1></h1>2. <h1>Now I Can Safely Put My Title</h1>
Using Tabs<ul>
<li> List Item</li><li> Another List Item</li>
</ul>
Which do you prefer?Clean readable code matters!
NO SPACES, NO SMILY FACES and NO CAPITAL LETTERS!
Repeat after me!
When naming files or folders…
Contact us we’re cool .html
contact-us.htmlcontact-us.html
/Images = BAD/New File = BAD/Stupid name = BAD
/images= perfect/new-file = good/good-name = Great
Thank youHope you enjoyed that rant!
