html css basics i n.
Download
Skip this Video
Download Presentation
HTML & CSS Basics I

Loading in 2 Seconds...

play fullscreen
1 / 19

HTML & CSS Basics I - PowerPoint PPT Presentation


  • 110 Views
  • Uploaded on

HTML & CSS Basics I. class one: intro to HTML, HTML page structure, text, images, and links. What is HTML?. Hyper Text Markup Language The language of the web: HTML documents = web pages Deals with content – design is for CSS SEMANTIC vs. STYLE

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 'HTML & CSS Basics I' - emily-jenkins


Download Now 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
html css basics i

HTML & CSS Basics I

class one: intro to HTML,

HTML page structure, text, images, and links

what is html
What is HTML?
  • Hyper Text Markup Language
  • The language of the web: HTML documents = web pages
  • Deals with content – design is for CSS
    • SEMANTIC vs. STYLE
  • HTML standards set by  Web Hypertext Application Technology Working Group (WHATWG) and World Wide Web Consortium (W3C). HTML 4.01 released in1999, HTML 5 set for formal recommendation in 2014.
web browsers
Web Browsers
  • Web browsers are programs made to display HTML documents.
  • There are many of them:
    • Chrome
    • Explorer
    • Firefox
    • Opera
    • Safari
viewing html
Viewing HTML

CHROME

Explorer

firefox

  • Right click on page, select View Page Source or Inspect Element.
  • Right click on page, select View Source.
  • Right-click on page, select View Page Source.
html editors
HTML editors
  • Any text editor will work (but please don’t use Word)
  • We’ll use Notepad++ (Windows only)http://notepad-plus-plus.org/
  • Other options you can use:
    • Sublime Text (http://www.sublimetext.com/) OSX, Windows, Linux
    • Text Wrangler (http://www.barebones.com/products/TextWrangler/) OSX only
    • And about a gazillion others…
html syntax
HTML Syntax

<tag attribute=“value”></tag>

or

<tag attribute=“value” />

basic page structure
Basic Page Structure

<!DOCTYPE html>

<html>

<head>

<meta charset=“UTF-8” />

<title>name of webpage</title>

<link rel=”stylesheet” href=”URL” />

</head>

<body>

<header>

<nav>

<section>

<article>

<footer>

</body>

</html>

doctype
<!DOCTYPE>
  • Points browser toward Document Type Definition (DTD)
  • Should always be included before <html>
  • HTML5 standard is <!DOCTYPE html>

TRY IT:

<!DOCTYPE html>

Sam &amp; Sally's Cafe

html html
<html></html>
  • Tells the browser that it’s reading an HTML document.

TRY IT:

<!DOCTYPE html>

<html>

Sam &amp; Sally's Cafe

…etc…

&copy;2012 Sam &amp;Sally's Cafe | Home | About Us | Menu | Direction

</html>

head head
<head></head>
  • Contains information about the page, but not necessarily shown. Helps organize and design the page.

TRY IT:

<!DOCTYPE html>

<html>

<head>

</head>

Sam &amp; Sally's Café

body body
<body></body>
  • Contains the visible part of the HTML page – what the browser will show.

TRY IT:

</head>

<body>

Sam &amp; Sally's Cafe

…etc…

&copy;2012 Sam &amp;Sally's Cafe | Home | About Us | Menu | Direction

</body>

</html>

headings h1 h1
Headings <h1></h1>

TRY IT:

<body>

<h1>Sam &amp; Sally's Café</h1>…etc…

<h2>Great food &amp; great times</h2>…etc…

<h3>Hours</h3>…etc…

<h3>Reservations </h3>…etc…

<h3>Upcoming events</h3>…etc…

<h3>Join Our Mailing List</h3>

comments
Comments <!-- -->

TRY IT:

<body>

<!-- this is where I could leave a comment -->

paragraphs p p
Paragraphs <p></p>

TRY IT:

<p>This is a paragraph welcoming the visitor to come check out the cafe. …etc… In sodalesfelispulvinarligulagravidasodales.</p>

…etc…

<p>We're happy you'd like to join us for a meal! There are three ways to make reservations:</p>

…etc…

<p>Check out the folowing events. All events will take place at Sam &amp; Sally's Cafe. Be sure to check back for new events posted regularly.</p>

…etc…

<p>Paragraph about our mailing list and how to join.</p>

line breaks br
Line Breaks <br />

TRY IT:

Hours<br />

Monday 5 PM - 9 PM

text tags b b i i em em strong strong
Text Tags<b></b>,<i></i>,<em></em>,<strong></strong>

<b>

  • Text stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is boldened
  • “Press the enter key to continue”

<strong>

  • represents strong importance for its contents
  • “DO NOT go near the pit full of spikes.”

<i>

  • Text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized
  • “Joie de vivre”

<em>

  • represents stress emphasis of its content, not importance
  • “You didn’t go to the store.”
images img attributes src alt width height
Images <img />attributes: src, alt, width, height

TRY IT:

Directions

<imgsrc=“images/cafe1.jpg" alt=“shrimp salad" />

<imgsrc="images/cafe3.jpg" alt=“interior shot of cafe" />

<imgsrc="images/cafe2.jpg" alt=“satay beef" />

<h2>Great food &amp; great times</h2>

links a a
Links <a></a>

Linking to other pages on website:

TRY IT:

<a href="index.html">Home</a>

<a href="about.html">About Us</a>

<a href="menu.html">Menu</a>

<a href="directions.html">Directions</a>

links a a1
Links <a></a>

Linking to pages external to your website:

TRY IT:

Reserve online through <a href=“http://www.opentable.com”>OpenTable</a>