Internet Chapter 7 606
HTML 607
HTML Hypertext Markup Language (HTML) is a language for creating web pages. A web page is made up of two parts: the head and the body. The head is the first part of a web page. The head contains the title of the page and other parameters that the browser will use. The actual contents of a page are in the body, which includes the text and the tags. Whereas the text is the actual information contained in a page, the tags define the appearance of the document. 608
HTML Creating an HTML file is easy: First, create a folder on your desktop to keep everything organized. Call it whatever you would like. Open a standard text editor (Notepad for Windows). Save the file to the folder you created and name it MyFirstWebPage.html, or whatever you want to call it as long as it ends with.html 609
610
Basic structure of HTML documents <head> </head> 611
HTML Headers HTML headers are where your web page information is stored. The content inside of head tags will not be seen as content on your page. Things like page title, Meta data, CSS, and Javascript go here. 612
HTML Headers Page title The title tag is located with-in the head tags. The title is very important for a web page. Page titles show at the top of the web browser. <head> <title>title of your page</title> </head> Content of the page 613
HTML text All text that you want to appear on your web page will go inside of the body tags. 614
HTML text Spacing words In an HTML document, spacing text only allows up to one space between words. It doesn't matter how many times you hit the space bar in an HTML document, it will always only display as one space. <head> <title>title of your page</title> </head> Word 1 Word 2 615
HTML text New lines To bring text down to the next line requires the br tag (<br> </br> <br />). The br tag stands for "break" or "line break". <head> <title>title of your page</title> </head> This is the first line of text. <br> This is the second line of text. 616
HTML text Common text tags In older browsers and older versions of HTML the font tag could be used to style text. In newer versions of HTML the font tag has been removed. Text is now styled with CSS. <head> <title>title of your page</title> </head> <strong>bold text here</strong><br> <em>italics text</em><br> <u>underlined text</u> 617
HTML text Common text tags <head> <title>title of your page</title> </head> <strike>text with a lign that passes through him</strike><br> NEXT: <sup>superscript text</sup><br> NEXT: <sub>subscript text</sub> 618
HTML text Common text tags <head> <title>title of your page</title> </head> To show a delete <del>text</del><br> To show an inserted <ins>text</ins><br> To show <big>big</big> and <small>small</small> text 619
HTML text Common text tags <head> <title>title of your page</title> </head> This is a <tt>monospace text</tt> 620
HTML Heading text Heading text, or the H tag, is used to create large bold text. The H tag has 6 different options. <head> <title>title of your page</title> </head> <h1>the biggest heading</h1> <h2>a little smaller</h2> <h3>even smaller</h3> <h4>smaller yet</h4> <h5>almost the smallest</h5> <h6>the smallest heading</h6> 621
HTML Paragraphs Generally, paragraph tags follow the H (Heading) tags. <p>this is our first paragraph</p> <p>this is our second paragraph</p> <p>this is our last paragraph</p> As with the heading tags, each new paragraph will be below the previous paragraph. Paragraphs have default margins and paddings that keep them well separated from each other allowing content on the page to be spaced and easier to read. Anything following the closing P tag will be positioned below. 622
HTML Paragraphs To have a neat and organized page, use headings and paragraphs together. Heading text will be the bold text and the paragraph will be the descriptive text below. <head> <title>title of your page</title> </head> <h1>hello, Welcome to my first website</h1> <p>thank you for visiting my website. This is a little bit of content that relates to my heading above!</p> 623
HTML Paragraphs the HTML <pre> element can be used to preserve both spaces and line breaks. It defines a preformatted text. <head> <title>title of your page</title> </head> <h1>hello, Welcome to my first website</h1> <pre> Thank you for visiting my website. This is a little bit of content that relates to my heading above!</pre> 624
HTML links HTML links "hyperlinks" are used to redirect users to either parts of the page or new pages. There are 2 types of links, page anchors and external links. 625
HTML links Page anchors Page anchors are used to scroll users to certain parts of the page when they click a link. Say a user is scrolled to the bottom of the page, and you want them to have a quick way back to the top without having to scroll. This is where page anchors come in hand. <head> <title>title of your page</title> </head> <a id="top">top of the page</a> <br><br><br><br><br><br><br> <a href="#top">go to the top of the page</a> 626
HTML links Linking to other pages Hyperlinks are used to direct users to other pages on the website, or to other websites. The above code creates a link to Google. It is important when creating hyperlinks to put the full URL to the page you are linking to beginning with http://. The HREF attribute will be the destination of the link when clicked. <head> <title>title of your page</title> </head> <a href="http://www.google.com"> Go to google</a> 627
HTML links Opening hyperlinks in new windows Most of the time as a website owner, you want users to stay on your website. So when linking to other websites you might want to open the links in new windows to keep users from leaving your site. This is done with the target attribute. <head> <title>title of your page</title> </head> <a href="http://www.google.com" target="_blank" >Go to google</a> 628
HTML links HTML adding images Images are an important part in building websites. Images are very simple and can also be used as links. <img /> src="location of the image" title="text displayed when the pointer is hovered over the image alt="an image" style="width:300px;height:300px; " The IMG tag is used to add images on your page. The SRC or "search" attribute tells the code where to locate the image to be displayed. The TITLE attribute is used to display text when a user hovers their mouse over the image. 629
HTML links HTML adding images <head> <title>title of your page</title> </head> <img src="pics/mypicture.png" title="upcoming episode of Quantico" /> 630
HTML links Using an image as a link Say you want to have button images that link to other pages on your website. You can wrap an image tag with a link tag to do this. By default, images wrapped in links will have un ugly blue border around them, we get rid of that by telling the image to have a border of 0. <head> <title>title of your page</title> </head> <a href="http://www.imdb.com"> <img src="pics/mypicture.png" title="upcoming episode of Quantico" border="0" /> </a> 631
HTML Tables Tables are very important in web design. They are used to hold pieces of the page together and allow you to position different elements on the page. They can also be used to store large amounts of organized information. 632
Creating basic tables <head> <title>title of your page</title> </head> <table width="400" cellpadding="1" cellspacing="1" border="1"> <tr> <td>first column, First row</td> <td>second column, First row</td> </tr> <tr> <td>first column, Second row</td> <td>second column, Second row</td> </tr> </table> In this part of the tutorial, you will learn to create a very basic table. The table will have 2 rows with 2 columns in each row. This code creates a table that is 400 pixels wide. The table has 1 pixel padding in each cell, and 1 pixel of spacing between cells to keep the table content from looking cluttered. Thetablealsohasa1pixelborder. 633
Creating basic tables TR explained Each TR tag in a table stands for "table row". Inside of TR tags is where you will place the table columns for that row with TD tags. Each new row in a table must have separate TR opening and closing tags. 634
Creating basic tables TD explained Inside of each TR opening and closing tag you will place the TD or "table column" tags. Inside of TD tags is where you will have the content that is displayed inside of that column. you can put as many table columns in a row as you would like. Each TD can have its own width and height attributes. 635
HTML Table with a Rowspan Rowspans are used to create table columns that expand through rows. <head> <title>title of your page</title> </head> <table width="400" cellpadding="1" cellspacing="1" border="1"> <tr> <td rowspan="2">this table column expands through 2 rows in the table</td> <td>this is row 1</td> </tr> <tr> <td>this is row 2</td> </tr> </table> As you can see, we have a table with 2 rows. We have added a rowspanto the first column in the first row of the table to expand that column down into the next row 636
HTML Table with a Colspan <head> Colspans are like Rowspans, except Colspans expand table columns through each other instead of through rows <title>title of your page</title> </head> <table width="400" cellpadding="1" cellspacing="1" border="1"> <tr> <td colspan="2">this is a table column expanding through 2 columns in the row. </td> </tr> <tr> <td>first column, Second row</td> <td>second column, Second Row</td> </tr> </table> As you can see, the column in the first row of the table expands over two columns. 637
Nesting tables inside of each other <head> <title>title of your page</title> </head> <table width="400" border="1" cellspacing="1" cellpadding="1"> <tr> <td>first column, First Row, Parent Table</td> <td rowspan="2"> <table cellpadding="1" cellspacing="1"> <tr> <td>first column, First row, Nested Table</td> </tr> <tr> <td>first column, Second row, Nested Table</td> </tr> </table> </td> </tr> <tr> <td>first column, Second row, Parent Table</td> </tr> </table> Tables can be nested inside of each other to create more complex tables. 638
Nesting tables inside of each other 639
Lists There are 3 types of list that can be defined in HTML: unordered, ordered, and description lists. 640
Unordered Lists <ul> <li>first item</li> <li>second item</li> <li>third item</li> </ul> 641
Unordered Lists <ul type="circle"> <li>first item</li> <li>second item</li> <li>third item</li> </ul> 642
Unordered Lists <ul type="disc"> <li>first item</li> <li>second item</li> <li>third item</li> </ul> 643
Unordered Lists <ul type="square"> <li>first item</li> <li>second item</li> <li>third item</li> </ul> 644
Ordered Lists <ol> <li>first item</li> <li>second item</li> <li>third item</li> </ol> 645
Ordered Lists <ol start="3" type="i"> <li>first item</li> <li>second item</li> <li>third item</li> </ol> type = 1, type= A, type= a, type= I, and type= i" 646
Nested Lists <ol start="10" type="a"> <li>first item</li> <li>second item <ul type="circle"> <li>a</li> <li>b</li> <li>c</li> </ul> </li> <li>third item</li> </ol> 647