Transcription
HTML&CSSdesign and build websitesjon duckett
1StructureXXXXXXUnderstanding structureLearning about markupTags and elements
We come across all kinds of documentsevery day of our lives. Newspapers,insurance forms, shop catalogues. thelist goes on.Many web pages act like electronic versions of thesedocuments. For example, newspapers show the same storiesin print as they do on websites; you can apply for insuranceover the web; and stores have online catalogs and e-commercefacilities.In all kinds of documents, structure is very important in helpingreaders to understand the messages you are trying to conveyand to navigate around the document. So, in order to learn howto write web pages, it is very important to understand how tostructure documents. In this chapter you will:13 See how HTML describes the structure of a web page Learn how tags or elements are added to your document Write your first web pageSTRUCTURESTRUCTURE14
How Pages UseStructureThink about the stories youread in a newspaper: for eachstory, there will be a headline,some text, and possibly someimages. If the article is a longpiece, there may be subheadingsthat split the story into separatesections or quotes from thoseinvolved. Structure helps readersunderstand the stories in thenewspaper.15STRUCTUREThe structure is very similarwhen a news story is viewedonline (although it may alsofeature audio or video). This isillustrated on the right with acopy of a newspaper alongsidethe corresponding article on itswebsite.Now think about a very differenttype of document — aninsurance form. Insurance formsoften have headings for differentsections, and each sectioncontains a list of questions withareas for you to fill in details orcheckboxes to tick. Again, thestructure is very similar online.STRUCTURE16
Structuring WordDocumentsThe use of headings andsubheadings in any documentoften reflects a hierarchy ofinformation. For example, adocument might start witha large heading, followed byan introduction or the mostimportant information.17STRUCTUREThis might be expanded uponunder subheadings lower downon the page. When using a wordprocessor to create a document,we separate out the text to giveit structure. Each topic mighthave a new paragraph, and eachsection can have a heading todescribe what it covers.On the right, you can see asimple document in MicrosoftWord. The different styles forthe document, such as differentlevels of heading, are shownin the drop down box. If youregularly use Word, you mighthave also used the formattingtoolbar or palette to do this.STRUCTURE18
On the previous page you sawhow structure was added toa Word document to make iteasier to understand. We usestructure in the same way whenwriting web pages.HTML Describesthe Structureof PagesIn the browser window you can see a web page that features exactlythe same content as the Word document you met on the page 18. Todescribe the structure of a web page, we add code to the words we wantto appear on the page.You can see the HTML code for this page below. Don't worry about whatthe code means yet. We start to look at it in more detail on the nextpage. Note that the HTML code is in blue, and the text you see on screenis in black. html body h1 This is the Main Heading /h1 p This text might be an introduction to the rest ofthe page. And if the page is a long one it mightbe split up into several sub-headings. /p h2 This is a Sub-Heading /h2 p Many long articles have sub-headings to help youfollow the structure of what is being written.There may even be sub-sub-headings (or lower-levelheadings). /p h2 Another Sub-Heading /h2 p Here you can see another sub-heading. /p /body /html The HTML code (in blue) is made up of characters that live inside angledbrackets — these are called HTML elements. Elements are usuallymade up of two tags: an opening tag and a closing tag. (The closing taghas an extra forward slash in it.) Each HTML element tells the browsersomething about the information that sits between its opening andclosing tags.19STRUCTURESTRUCTURE20k
HTML Uses Elementsto Describe theStructure of PagesLet's look closer at the code from the last page.There are several different elements. Eachelement has an opening tag and a closing tag.Tags act like containers. They tell yousomething about the information that liesbetween their opening and closing tags.CodeDescription html body Words between h1 and /h1 are a main heading. p This text might be an introduction to the rest ofthe page. And if the page is a long one it mightbe split up into several sub-headings. /p A paragraph of text appears between these p and /p tags. h2 This is a Sub-Heading /h2 Words between h2 and /h2 form a sub-heading. p Many long articles have sub-headings to help youfollow the structure of what is being written.There may even be sub-sub-headings (or lower-levelheadings). /p Here is another paragraph between opening p and closing /p tags. h2 Another Sub-Heading /h2 Another sub-heading inside h2 and /h2 tags. p Here you can see another sub-heading. /p Another paragraph inside p and /p tags. /html STRUCTUREThe body tag indicates that anything between it and the closing /body tag should be shown inside the main browser window. h1 This is the Main Heading /h1 /body 21The opening html tag indicates that anything between it and a closing /html tag is HTML code.The closing /body tag indicates the end of what should appear in the main browser window.The closing /html tag indicates that it is the end of the HTML code.STRUCTURE22
A Closer Look at TagsCharacterCharacter p /p left-angle bracket(less-than sign)RIGHT-angle bracket(MORE-than sign)RIGHT-angle bracket(MORE-than sign)left-angle bracket(less-than sign)Forward SlashClosing TagOpening TagThe characters in the bracketsindicate the tag's purpose.23STRUCTUREFor example, in the tags abovethe p stands for paragraph.The closing tag has a forwardslash after the the symbol.The terms "tag" and "element"are often used interchangeably.Strictly speaking, however, anelement comprises the openingtag and the closing tag and anycontent that lies between them.STRUCTURE24
Attributes Tell UsMore About ElementsAttributes provide additional informationabout the contents of an element. They appearon the opening tag of the element and aremade up of two parts: a name and a value,separated by an equals sign.HTML5 allows you to useuppercase attribute names andomit the quotemarks, but this isnot recommended.AttributeNameAttributeName p lang "en-us" Paragraph in English /p AttributeValueThe attribute name indicateswhat kind of extra informationyou are supplying about theelement's content. It should bewritten in lowercase.25STRUCTUREThe value is the informationor setting for the attribute. Itshould be placed in doublequotes. Different attributes canhave different values. p lang "fr" Paragraphe en Français /p AttributeValueHere an attribute called lang isused to indicate the languageused in this element. The valueof this attribute on this pagespecifies it is in US English.The majority of attributes canonly be used on certainelements, although a fewattributes (such as lang)can appear on any element.Most attribute values areeither pre-defined or follow astipulated format. We will lookat the permitted values as weintroduce each new attribute.The value of the lang attributeis an abbreviated way ofspecifying which language isused inside the element thatall browsers understand.STRUCTURE26
Body, Head & Title body You met the body elementin the first example we created.Everything inside this element isshown inside the main browserwindow. head Before the body element youwill often see a head element.This contains informationabout the page (rather thaninformation that is shown withinthe main part of the browserwindow that is highlighted inblue on the opposite page).You will usually find a title element inside the head element.Anything written between the title tags will appear in thetitle bar (or tabs) at the top ofthe browser window, highlightedin orange here.HTML/chapter-01/body-head-title.html html head title This is the Title of the Page /title /head body h1 This is the Body of the Page /h1 p Anything within the body of a web page isdisplayed in the main browser window. /p /body /html R e s u ltAnything written betweenthe body tags will appearin the main browser window,highlighted in blue here. title The contents of the title element are either shown in thetop of the browser, above whereyou usually type in the URL ofthe page you want to visit, oron the tab for that page (if yourbrowser uses tabs to allow youto view multiple pages at thesame time).27rSTRUCTUREYou may know that HTMLstands for HyperText MarkupLanguage. The HyperText partrefers to the fact that HTMLallows you to create links thatallow visitors to move from onepage to another quickly andeasily. A markup language allowsyou to annotate text, and theseannotations provide additionalmeaning to the contents of adocument. If you think of a webpage, we add code around theoriginal text we want to displayand the browser then usesthe code to display the pagecorrectly. So the tags we add arethe markup.STRUCTURE28s
Creating a Web Pageon a PCTo create your first web page ona PC, start up Notepad. You canfind this by going to:1Article3StartAll Programs (or Programs)AccessoriesNotepadSave this file as first-test.html. Make sure that the Saveas type drop down has All Filesselected.You might also like to downloada free editor called Notepad from notepad-plus-plus.org.Type the code shown on theright.Go to the File menu and selectSave as. You will need to savethe file somewhere you canremember. If you like, you couldcreate a folder for any examplesthat you try out from this book.24Start your web browser. Go tothe File menu and select Open.Browse to the file that you justcreated, select it and click on theOpen button. The result shouldlook something like the screenshot to the left.If it doesn't look like this, findthe file you just created on yourcomputer and make sure that ithas the file extension .html (ifit is .txt then you need to goback to Notepad and save thefile again, but this time put quotemarks around the name "firsttest.html").29tSTRUCTURESTRUCTURE30u
Creating a Web Pageon a MacTo create your first web page ona Mac, start up TextEdit. Thisshould be in your Applicationsfolder.1Article3Now go to the File menu andselect Save as. You will need tosave the file somewhere you canremember.If you like, you could create afolder for any examples that youtry out from this book. Save thisfile as first-test.html. Youwill probably see a window likethe screen shot to the left.You might also like to downloada free text editor for creatingweb pages called TextWranglerwhich is available frombarebones.com .You want to select the Use .htmlbutton.Type the code shown on theright.24Next, start your web browser,go to the File menu, and selectOpen. You should browse to thefile that you just created, selectit and click on the Open button.The result should look like thescreen shot to the left.If it doesn't look like this, youmight need to change one ofthe settings in TextEdit. Go tothe TextEdit menu and selectPreferences. Then on thepreferences for Open and Save,tick the box that says Ignore richtext commands in HTML files.Now try to save the file again.31vSTRUCTURESTRUCTURE32w
Code in a ContentManagement SystemIf you are working with a contentmanagement system, bloggingplatform, or e-commerceapplication, you will probablylog into a special administrationsection of the website to controlit. The tools provided in theadministration sections of thesesites usually allow you to editparts of the page rather thanthe entire page, which meansyou will rarely see the html , head , or body elements.Looking at the contentmanagement system on theopposite page, you have a box33STRUCTUREthat allows you to enter a titlefor the page, another box for themain article, a way to enter apublication date, and somethingto indicate which section of thesite this page belongs in.For an e-commerce store, youmight have boxes that allow youto enter a title for the product,a description of the product, itsprice, and the quantity available.That is because they use a single'template' to control all of thepages for a section of the site.(For example, an e-commercesystem might use the sametemplate to show all of theirproducts.) The informationyou supply is placed into thetemplates.The advantage of this approachis that people who do not knowhow to write web pages canadd information to a websiteand it is also possible to changethe presentation of somethingin the template, and it willautomatically update every pagethat uses that template. If youimagine an e-commerce storewith 1,000 items for sale, justaltering one template is a loteasier than changing the pagefor each individual product.In systems like this, whenyou have a large block of textthat you can edit, such as anews article, blog entry or thedescription of a product in ane-commerce store, you will oftensee a text editor displayed.Text editors usually havecontrols a little like those onyour word processor, givingyou different options to styletext, add links or insert images.Behind the scenes these editorsare adding HTML code to yourtext, just like the code you haveseen earlier in this chapter.Many of these editors will havean option that allows you to see(and edit) the code that theyproduce.Once you know how to read andedit this code, you can take morecontrol over these sections ofyour website.In the example above, you cansee that the text editor has a tabfor Visual / HTML views of whatthe user enters. Other systemsmight have a button (whichoften shows angle brackets) toindicate how to access the code.Some content managementsystems offer tools that alsoallow you to edit the templatefiles. If you do try to edittemplate files you need to checkthe documentation for your CMSas they all differ from each other.You need to be careful whenediting template files becauseif you delete the wrong piece ofcode or add something in thewrong place the site may stopworking entirely.STRUCTURE34y
Looking at How Othersites are BuiltWhen the web was first takingoff, one of the most commonways to learn about HTML anddiscover new tips and techniqueswas to look at the source codethat made up web pages.These days there are manymore books and online tutorialsthat teach HTML, but you canstill look at the code that a webserver sends to you. To try thisout for yourself, simply go to thesample code for this chapter, atwww.htmlandcssbook.com/view-source/ and click on thelink called "View Source."35STRUCTUREOnce you have opened thispage, you can look for the Viewmenu in your browser, and selectthe option that says Source orView source. (The title changesdepending on what browser youare using.)At first this code might lookcomplicated but don't bediscouraged. By the time youhave finished the next chapterof this book, you will be able tounderstand it.You should see a new windowappear, and it will contain thesource code that was used tocreate this page.All of the examples for this bookare on the website, and you canuse this simple technique on anyof the example pages to see howthey work.You can see this result in thephotograph on the right. Thepage you see is the window atthe top; the code is below.You can also download all ofthe code for this book from thesame website by clicking on the"Download" link.STRUCTURE36
SummarySTRUCTUREXXHTML pages are text documents.XXHTML uses tags, which are characters that sitinside angled brackets. They act like containersand tell you something about the informationthat lies between them.XXTags are often referred to as elements.XXTags usually come in pairs. The opening tag denotesthe start of a piece of content; the closing tagdenotes the end.XXOpening tags can carry attributes, which tell usmore about the content of that element.XXAttributes require a name and a value.XXTo learn HTML you need to know what tags areavailable for you to use, what they do, and wherethey can go.
THIS BOOK IS FORYOU'LL LEARN TOONLINE SUPPORTWeb designers and programmersOnline editors and content authorsMarketing and e-commerce teamsBloggers and hobbyistsWrite HTML5 and CSS3Structure pages and whole sitesPrepare images, audio, and videoControl typography and layoutCode examples available online at:http://www.htmlandcssbook.comPlus video demos and tutorialsBonus reference toolsan.CSS mL & ros f t hisTM ite,bt H bs site we ,ou wely i n ggta b ldendtinaiesdniii.a r d b u ex r - f r imid g uleksnstto n an er a , use e in thi boo ualgsvayegdn b owviw e s i o l o t ivc a e h m i n l e , a n ie a lcrer o dpicde sent trapmtica n ant e co e at t co will gra sim com act oura uoroa acwo r e atf y ngthnpretdpm you e m cr and d yo alc i ons fin es o nni d!kunrpiicotoungaotootssatidetelyhetieern a ll a l e p a o k s e eW h e t h o r e lpinew laadhn d si doW ratc ill h e u k in y tr a n exp ou w gn t at l nceot h r ieessird . Yank w .Wscont a lo m duc rwa lesde ites pebo tepeomn d bsexnkot r ht f o a mtafrcoe a we ousinstgzisibu fer age tra ode an ate revifges dcdi c h p t hcr o poreinotw -sizEaca e . Nwuaysw bite n ho t yo o utby lp o tha syeasohete aredsiProgramming Languages / HTML, SGMLUSA 29.99 / CAN 35.99ISBN 978-1-118-00818-8JON DUCKETT has been designing and building websites for fourteen years.He has worked with both small startups and global brands and has written morethan a dozen books on web design, programming, usability and accessibility.
HTML&CSS design and build websites jon duCkeTT. 1 X Understanding structure X Learning about markup X Tags and elements Structure. 13 STRUCTURE We come across all kinds of documents . The HTML code (in blue) is made up of characters that live inside angled brackets — these are called HTML elements. Elements are usuallyFile Size: 1MB
