Marking up text

16

description

Used in support of lecture on marking up text using HTML

Transcript of Marking up text

Page 1: Marking up text
Page 2: Marking up text

Domain Names DiscussionSymantec Inline ElementsReview - using Carlos Fuentes web pageLecture on text markupResume fixitGeneric Elements

Page 3: Marking up text
Page 4: Marking up text

Open the PDF file labeled, Instructions for Carlos Fuentes web page.Complete the web page based on these instructions.

Page 5: Marking up text

Open the PDF file labeled, Instructions for Carlos Fuentes web page.Complete the web page based on these instructions.

Page 6: Marking up text

abbr – Abbreviation acronym – Acronym b or strong - Bold

text br - Line break cite – Citation

code - Computer code

i or em - Italic text img - Inline image q - Short quotation

Inline elements typically may only contain text and other inline elements. When rendered visually, inline elements do not usually begin on a new line.

Page 7: Marking up text

Open the file resume.txt in NotePad in Windows or TextEdit on Mac

Page 8: Marking up text

Open resume_fixit.html and correct the html

Page 9: Marking up text

Generic HTML elements include the div and span tags.

Generic because they are used to divide a document into parts which in turn through the use of identifiers (id and class) be used to style a document in specific ways.

Page 10: Marking up text

Div can be used as a container to group like things together.<div class=”listing”>

<img src=”felic1.gif alt=”” /><p><cite>The Complete Manual of Typography</cite>, James Felic</p><p>a combination of type history with examples </p>

</div>

Page 11: Marking up text

Div can be used to break a page into sections for context, structure and layout purposes.<div id=“news”>

<h1>News the week</h1><p> We’ve been working on...</p><p>And last but not least, ...</p>

</div>

Page 12: Marking up text

Span is used for inline elements. Span can only contain text and other inline elements.<ul><li>Juan <span class=”phone”>999-0202</span></li><li>Julia <span class=”phone”>888-4889</span></li><li>Mairo <span class=”phone”>999-3220</span></li>

</ul>

Page 13: Marking up text

The id identifier is used only once in a document. Treats the element as if it were data.<div id=”ISBN123456”>

<img src=”felic1.gif alt=”” /><p><cite>The Complete Manual of Typography</cite>, James Felic</p><p>a combination of type history with examples</p>

</div>

Page 14: Marking up text

Can also be used to divide a document into parts.<div id=”pageheader”>

(masthead and navigation here)</div>

<div id=”main”>(main elements here)

</div><div id=”footer”> (copyright info) </div>

Page 15: Marking up text

The class identifier is used for grouping similar elements and can be used multiple times on a page.<div id=”ISBN123456” class= “listing”>

<img src=”felic1.gif alt=”” /><p><cite>The Complete Manual of Typography</cite>, James Felic</p><p>a combination of type history with examples</p>

</div>

Page 16: Marking up text

Work through Chapter 5 in BookWork through Chapter 5 in Book

Assignment: Assume you want to host Assignment: Assume you want to host a web site. Find out what is available, a web site. Find out what is available, the range of options, how much it the range of options, how much it would cost. would cost.