being awesome with html n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Being Awesome with HTML PowerPoint Presentation
Download Presentation
Being Awesome with HTML

Loading in 2 Seconds...

play fullscreen
1 / 20

Being Awesome with HTML - PowerPoint PPT Presentation


  • 97 Views
  • Uploaded on

Being Awesome with HTML. A tutorial by Zoe F. HTML: The quick facts. What: The most popular markup language existing for webpages Who: Tim Berners-Lee When: In 1991, only 20 years ago Where: CERN Labs How: Browser- interpritation Why: He was a genius?.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Being Awesome with HTML' - yamal


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
being awesome with html

Being Awesome with HTML

A tutorial by Zoe F

html the quick facts
HTML: The quick facts
  • What: The most popular markup language existing for webpages
  • Who: Tim Berners-Lee
  • When: In 1991, only 20 years ago
  • Where: CERN Labs
  • How: Browser-interpritation
  • Why: He was a genius?
so what makes html so awesome
So what makes HTML so awesome?
  • It’s interpreted!
  • It’s simple
  • It looks impressive without a lot of work
house cleaning
House cleaning.

Possible Tools:

  • Wordpad,
  • TextWrangler(reccomended for Macs)
  • Notepad++
  • HTMLKit
  • netBeans
  • PageSpinner (for really old Macs)
some nomenclature to impress your friends and enemies
Some nomenclature to impress your friends and enemies
  • Plain old boring content.

I am some plain old boring content

  • Tags: What does this content look like?

<MyTag> Boring Content</MyTag>

  • Attributes: I mean, what does it reeeeeally look like?

<MyTagsize=big>Content</myTag>

nesting
Nesting!

These are the basics: A lot of the tags we go over today can also be implemented with CSS!

  • <tag1 >Content</tag1>
  • <tag1 attribute = stuff><tag2>Content</tag2></tag1>
  • <tag1><tag2>Content</tag1></tag2>

Deprecated Tags

resources
Resources
  • Reference:http://www.w3schools.com/tags/
  • Lab:http://www.binaryspark.com/classes/HTML_rocks/lab_instructions.html
  • Materials:http://www.binaryspark.com/classes/HTML_rocks/matterials.zip
the standard tags you gotta have
The standard tags you gotta have

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head> </head>

<body> </body>

</html>

text formatting
Text formatting

Making your content look pretty.

lists
Lists
  • Numbered lists/Ordered Lists (OL)<ol>…</ol>
  • Unordered Lists (UL)
  • <ul>…</ul>
  • List Items (li)<li>
doing stuff with images
Doing stuff with images!
  • <imgsrc = location of file>
slide12

Layout!

<table>

<tr>

<td></td>

</tr>

</table>

slide13

Layout!

<table>

<tr>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

</tr>

</table>

layout
Layout!

<table>

<trcolspan = 3>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</table>

commenting and beyond
Commenting and beyond!

<!-- Place the comment here! -->

  • Use them when the code gets complicated
  • When you want others to be able to follow what you’ve done
  • When you want to hide secret messages
  • Whenever
linkin
Linkin’

<a href = “whatever.html” target = “_blank”>

Tag attribute attribute

css the final frontier http www w3schools com css css reference atoz asp
CSS: The final frontierhttp://www.w3schools.com/Css/css_reference_atoz.asp

The old way:

<font size = 36pt color = “blue”>

<B><h1>Hello</h1></b>

</font>

The new hotness:

H1 {

font-size:36pt;

color:blue;

font-weight:bold

}

<h1>Hello</hello>

Property

internal style sheets
Internal Style Sheets!
  • <head> <style type="text/css"> body {background-color:yellow;color:white; }

p {color:blue}

</style></head>