Transcription
html & css basicsclass oneintro to HTML, HTML page structure,text, images, & links
what is HTML? Hyper Text Markup LanguageThe language of the web:HTML documents web pagesDeals with content – design is for CSS SEMANTIC vs. STYLEHTML standards set by Web Hypertext Application TechnologyWorking Group (WHATWG) and World Wide Web Consortium(W3C). HTML 4.01 released in1999, HTML 5 set for formalrecommendation in 2014.
web browsers Web browsers are programs made to displayHTML documents. There are many of them: ChromeExplorerFirefoxOperaSafari
viewing HTMLFirefox:Chrome:
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 tag attribute “value” /tag or tag attribute “value” /
basic page structure !DOCTYPE html html lang “en” head title name of webpage /title link rel ”stylesheet” href ”URL” / /head body header /header nav /nav section /section footer /footer /body /html
!DOCTYPE Points browser toward Document Type Definition(DTD) Should always be included before html HTML5 standard is !DOCTYPE html TRY IT: !DOCTYPE html Sam & Sally's Cafe
html /html T ells the browser that it’s reading an HTML document. A dd a language tag to declare what language the content onyour website is written in.TRY IT: !DOCTYPE html html lang "en" Sam & Sally's Cafe etc ©2012 Sam &Sally's Cafe Home About Us Menu Direction /html
head /head Contains information about the page, but not necessarilyshown. Helps organize and design the page.TRY IT: !DOCTYPE html html head /head Sam & Sally's Café
body /body Contains the visible part of the HTML page – what the browser will show. TRY IT: /head body Sam & Sally's Cafe etc ©2012 Sam &Sally's Cafe Home About Us Menu Direction /body /html
headings h1 /h1 TRY IT: body h1 Sam & Sally's Café /h1 etc h2 Great food & great times /h2 etc h3 Hours /h3 etc h3 Reservations /h3 etc h3 Upcoming events /h3 etc h3 Join Our Mailing List /h3
comment !---- TRY IT: !-- this is where I leave a comment --
paragraph p /p TRY IT: p This is a paragraph welcoming the visitor to come check outthe cafe. etc In sodales felis pulvinar ligula gravida sodales. /p etc p We're happy you'd like to join us for a meal! There are threeways to make reservations: /p etc p Check out the folowing events. All events will take place atSam & Sally's Cafe. Be sure to check back for new events postedregularly. /p etc p Paragraph about our mailing list and how to join. /p
line break br/ TRY IT:Hours br / Monday 5 PM - 9 PM
text tag i b em strong i Text in an alternate voiceor mood, or otherwiseoffset from the normalprose, such as ataxonomic designation, atechnical term, anidiomatic phrase fromanother language, athought, a ship name, orsome other prose whosetypical typographicpresentation is italicized “Joie de vivre” b Text stylistically offsetfrom the normal prosewithout conveying any extraimportance, such as keywords in a documentabstract, product names ina review, or other spans oftext whose typicaltypographic presentation isboldened “Press the enter key tocontinue” em represents stressemphasis of itscontent, notimportance “You didn’t go to thestore.” strong represents strongimportance for itscontents “DO NOT go near the pitfull of spikes.”
image img/ attributes: src, alt, width, heightTRY IT:Directions img src "images/cafe1.jpg" alt "shrimp salad" width "250px" / img src "images/cafe3.jpg" alt "interior shot ofcafe" width "250px" / img src "images/cafe2.jpg" alt "satay beef" width "250px" / h2 Great food & great times /h2
link a /a Linking to other pages on your website.TRY IT: a a a ahref "index.html" Home /a href "about.html" About Us /a href "menu.html" Menu /a href "directions.html" Directions /a
link a /a Linking to pages external to another website.TRY IT:Reserve online through a href "http://www.opentable.com" OpenTable /a
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.0
