Web Design with HTML

Web Designwith HTML Instructor: Graham Watson

Lesson 1: What is HTML? • HTML stands for Hypertext Markup Language. • Web browsers are programs that read the code that you write and translate the HTML “tags” into visual elements, like images, tables, font sizes and colors, etc.

Lesson 1: What is HTML? • So if you’re looking at your web page in a word processor, you’ll see a mix of the text that you want displayed and all the code that tells the browser how to display it. <html> <body> <center> <font color=red>Red</font> <font color=green>Green</font> <font color=blue>Blue</font> </center> </body> </html>

Lesson 1: What is HTML? • Once you open the file up in a browser, your HTML will be processed and you’ll see your finished product. <html> <body> <center> <font color=red>Red</font> <font color=green>Green</font> <font color=blue>Blue</font> </center> </body> </html> RedGreenBlue

Lesson 2: Intro to Tags • HTML is made up of “tags” • Three flavors of tags: • <tagname> • <tagname> … </tagname> • <tagname property=“value”> … </tagname>

Lesson 2: Intro to Tags <font color=red size=3> … </font> Example of a tag: tag name attribute value attribute value text affected The endtag closes the last tag that’s been opened with the same name

Lesson 2: Intro to Tags • <tagname> style (simple tags) • Examples: • <br> Line break • <p>Paragraph break (double line break) <html> <body> Some text. Some more. Even more. </body> </html> Some text. Some more. Even more. <html> <body> Some text. <br>Some more. <p>Even more. </body> </html> Some text. Some more. Even more.

Lesson 2: Intro to Tags • A note on how code gets translated into text in a webpage: • Extra spaces get ignored by the browser just like line breaks. • You can make these extra spaces show up in a webpage if, instead of using normal spaces, you use “ ” (a Non-Breaking SPace) <html> <body> This that. </body> </html> This that. <html> <body> This that. </body> </html> This that.

Lesson 2: Intro to Tags • Since web browsers ignore extra spaces and line breaks, all of the following examples do the exact same thing: <html> <body> Some text. <br>Some more. <p>Even more. </body> </html> <html> <body> Some text.<br> Some more.<p> Even more. </body> </html> <html> <body> Some text.<br> Some more.<p> Even more. </body> </html> <html> <body> Some text. <br> Some more. <p> Even more. </body> </html> <html> <body> Some text.<br>Some more.<p>Even more. </body> </html>

Lesson 2: Intro to Tags • <tagname> … </tagname> style (start tag and end tag) • These tags effect everything inbetween the start tag and end tag. • Examples • <center> … </center> Centers text on the screen • <i> … </i>Italicizes text • <u> … </u>Underlines text • <b> … </b>Bolds text <html> <body> Some <u>text.</u> <center>Some <b>more.</center> <i>Even</b> more.</i> </body> </html> Some text. Some more. Even more.

Lesson 2: Intro to Tags • <tagname property=“value”> … </tagname> (tag with attribute) • Examples • <fontsize=3color=red face=“Times New Roman”> … </font> (Quotation marks are only needed around an attribute value if it takes up more than one word) Large text <html> <body> Here’s <fontsize=3> some <fontcolor=blue> text </font> for you. </font> </body> </html> Blue text Here’s some text for you.

Lesson 2: Intro to Tags • More examples of tags: • <div align=…> … </div> • Breaks off a block of text and aligns it left / right / center • <hr> • Creates a horizontal line across the page • <blockquote> … </blockquote> • Indents a block of text

Lesson 2: Intro to Tags • Your code should start with <html><body> and end with </body></html> • <body> can take the following attributes: • link=[color], vlink=[color], alink=[color] • With these, you can specify the color of links that have not been visited (link), have been visited (vlink), and have just been clicked on (alink) • text=[color] • This specifies the default color of your text • bgcolor=[color] • This sets the webpage’s background color

Lesson 4: Links and Images • Links (short for hyperlinks) can be clicked on to redirect the web browser to another webpage. • To make a link, wrap text in an anchortag • <a href=info.html>Click here for more info</a> • Specify the file that you want the link to open with the href= (hyperlink reference)attribute • For this class, all links must be made to files kept in the same directory as the one you’re working in

Lesson 4: Links and Images • Images are loaded onto a webpage wherever you include an image tag • <img src=car.jpg width=100 height=200 border=1> • Specify the filename of an image in the same directory as your webpage as the source (src=) of the image • Only specify the image’s width and height if you want them to be different from the image’s original width and height • Include border=0 if you want an image to be a link, but without a border around it.

Lesson 4: Links and Images • <img> tags also have an align= attribute that determines how an image deals with the text around it. • align=top Aligns the top of the image with text • align=bottom Aligns the bottom of the image with text • align=middle Aligns the middle of the image with text • align=left (or right) Floats the image on the left or right side of the screen, with text wrapping around it

Lesson 4: Links and Images Example: Blah <img src=scream.jpg align=[ ]> blah blah blah…

Lesson 4: Links and Images • Bringing links and images together… page3.html <html> <body> Blah blah blah…<br> <center> <a href=page2.html> <img src=leftarrow.jpg border=0> </a> <a href=page4.html> <img src=rightarrow.jpg border=0> </a> </center> </body> </html> Blah blah blah…

Lesson 5: Tables • Tables give you more control over how text and images are arranged on a webpage • Tables are made up of three tags • <table> … </table> Main table tag • <tr> … </tr> Table row • <td> … </td> Table data cell

Lesson 5: Tables • Imagine you want to create this layout, with the text centered horizontally and vertically in each cell (box).

Lesson 5: Tables • In HTML, the table is divided up like this: Row 1: Cell 1, Cell 2, Cell 3 Row 2: Cell 1, Cell 2, Cell 3 Row 3: Cell 1, Cell 2, Cell 3

Lesson 5: Tables • Here’s what the code would look like for a table laid out like this: <table> <tr> <td>…</td> <td>…</td> <td>…</td> </tr> <tr> <td>…</td> <td>…</td> <td>…</td> </tr> Text you want to show up in a cell <tr> <td>…</td> <td>…</td> <td>Bobby</td> </tr> </table>

Lesson 5: Tables • Attributes for <table> (entire table), • <tr> (a horizontal row), and • <td> (data cell)

Lesson 5: Tables This text would be centered in the very middle of the screen. <html> <body> <table width=100% height=100%> <tr> <td align=center valign=middle> This text would be centered in the very middle of the screen. </td> </tr> </table> </body> </html>

Lesson 5: Tables • So what if you wanted to get this effect? This block of text is aligned to the left, but floating in the middle of the screen.

Lesson 5: Tables • The wrong way: This block of text is aligned to the left, but floating in the middle of the screen. <html> <body> <table width=100% height=100%> <tr> <td align=left valign=middle> This block of text is aligned to the left, but floating in the middle of the screen. </td> </tr> </table> </body> </html>

Lesson 5: Tables • The right way: Use a table inside a table <html> <body> <table width=100% height=100%> <tr> <td align=center valign=middle> <table width=300><tr><td> This block of text is aligned to the left, but floating in the middle of the screen. </td></tr></table> </td> </tr> </table> </body> </html> This block of text is aligned to the left, but floating in the middle of the screen. 300 pixels wide

Lesson 6: Advanced Tables What if we want to break out of the normal grid layout?

Lesson 6: Advanced Tables • You can get this effect by telling a cell to span more than one column, or more than one row <table> <tr> <td>!</td><td>!</td> </tr> <tr> <td>!</td><td>!</td> </tr> </table> <table> <tr> <td colspan=2>!</td> </tr> <tr> <td>!</td><td>!</td> </tr> </table>

Lesson 6: Advanced Tables • More examples of using colspan= <table> <tr> <td colspan=3 align=center>!</td> </tr> <tr> <td>!</td><td colspan=2align=center>!</td> </tr> <tr> <td>!</td><td>!</td><td align=center>!</td> </tr> </table> <table> <tr> <td>!</td><td>!</td><td>!</td> </tr> <tr> <td colspan=2>!</td><td>!</td> </tr> </table>

Lesson 6: Advanced Tables • But in our first example, all of our cells only spanned one column. • How would one get this effect?

Lesson 6: Advanced Tables <table> <tr> <td>Blee blah bloo</td> <td rowspan=2 align=center> Blarg blah blahhh blah blooorp blah blah blah blah</td> </tr> <tr> <td>Blah dee blerp </td> </tr> </table>

Lesson 6: Advanced Tables rowspan= basically tells the browser that this particular cell is going to stretch down and take the space of cells that would have come below it <table> <tr> <td>a</td> <td align=center valign=middle>1</td> </tr> <tr><td>b</td></tr> <tr><td>c</td></tr> <tr><td>d</td><td>2</td></tr> </table>

Web Design with HTML