Introduction to Computer Science (I1100) Internet. Chapter 7

Size: px

Start display at page:

Download "Introduction to Computer Science (I1100) Internet. Chapter 7"

Nelson Peters
5 years ago
Views:

1 Internet Chapter 7 606

2 HTML 607

3 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

Open a standard text editor (Notepad for Windows).

4 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

5 610

6 Basic structure of HTML documents <head> </head> 611

7 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

8 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

9 HTML text All text that you want to appear on your web page will go inside of the body tags. 614

10 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

11 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

12 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

13 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

14 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

15 HTML text Common text tags <head> <title>title of your page</title> </head> This is a <tt>monospace text</tt> 620

16 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

17 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

18 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

19 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

20 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

21 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

22 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 The HREF attribute will be the destination of the link when clicked. <head> <title>title of your page</title> </head> <a href=" Go to google</a> 627

23 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=" target="_blank" >Go to google</a> 628

24 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

25 HTML links HTML adding images <head> <title>title of your page</title> </head> <img src="pics/mypicture.png" title="upcoming episode of Quantico" /> 630

26 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=" <img src="pics/mypicture.png" title="upcoming episode of Quantico" border="0" /> </a> 631

27 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

28 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

29 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

30 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

31 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

32 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

33 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

34 Nesting tables inside of each other 639

35 Lists There are 3 types of list that can be defined in HTML: unordered, ordered, and description lists. 640

36 Unordered Lists <ul> <li>first item</li> <li>second item</li> <li>third item</li> </ul> 641

37 Unordered Lists <ul type="circle"> <li>first item</li> <li>second item</li> <li>third item</li> </ul> 642

38 Unordered Lists <ul type="disc"> <li>first item</li> <li>second item</li> <li>third item</li> </ul> 643

39 Unordered Lists <ul type="square"> <li>first item</li> <li>second item</li> <li>third item</li> </ul> 644

40 Ordered Lists <ol> <li>first item</li> <li>second item</li> <li>third item</li> </ol> 645

41 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

42 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

Introduction to Computer Science (I1100) Internet. Chapter 7

Introduction to Computer Science (I1100) Internet. Chapter 7 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