HTMLnotesS15.notebook. January 25, 2015

Size: px

Start display at page:

Download "HTMLnotesS15.notebook. January 25, 2015"

Catherine Malone
5 years ago
Views:

1 The link to another page is done with the <a href which is set equal to the page I want within the a tag <a href="anotherpage.html"> Then after the <a> is complete I write the words that I want to appear as the link. They are automatically set to plue and underlined to let you know it is a link. I close with </a> which closes the <a> tag and then I use a <br> to skip down a line. Note and remember that a <p> is a paragraph and a blank line is inserted after a paragraph. 1

2 The current page HTML5linkpage.html and anotherpage.html are in the same directory. Therefore the link in HTML5linkpage.html finds anotherpage.html and can load it. 2

I modified the previous page and put in three links. The first one gives a complete http:// address to the home page for CIS120.

3 I modified the previous page and put in three links. The first one gives a complete address to the home page for CIS120. The second one goes to a subdirectory under HTML5 called subhtml5 to find the page. The third one links to a page in the same directory (the original link page). See next page. 3

4 This shows subhtml5 within HTML5 4

5 From HTML5 I clicked on subhtml5 to find fileinsubhtml5.html 5

6 This is anotherpage.html which was converted from Word to html. For this course you need to write HTML in Notepad do not use Word. 6

7 Now I have added 6 headers to my list page. Notice how they diminish in font size and also notice that there is an automatic blank line after each header. 7

8 Notice that I have changed the color and the alignment of the first three headers, the background color, the default font color and I have changed the color of the items in the unordered list. To do that, I have used Cascading Style Sheets (CSS). 8

9 The h1 says the style in the curly braces will apply to all the header 1 (h1) tags on your page. So all h1 will have the color property set to blue and the font size property set to 12 px. This could also be written as: h1 { color: blue; font size: 12 px; } or in a variety of other ways. 9

10 Two approaches to writing the same thing. 10

CSS is inserted using the <style> tag into the <head> portion of the page. Here I have specified the body should have a color of beige and the default font color should be brown.

11 CSS is inserted using the <style> tag into the <head> portion of the page. Here I have specified the body should have a color of beige and the default font color should be brown. Here I have specified that elements within an <h1> tag should be red and aligned to the center. Here I specified that elements within an <h2> tag should be blue and aligned to the right. Here I specified that elements within an <h3> tag should be green and aligned to the center. Here I specified that elements within a <ul> tag which means all of the <li> items within the <ul> should be red. 11

12 This page uses color and aligns some lines to the center. To do this, I again used Cascading Style Sheets (CSS). 12

13 To use CSS, I put the <style> tag in the <head> of the page and tell the type: <style type="text/css">. Style involves me telling what tag I am impacting. The first example is I want to make the font for the entire body red. This would make all of the font red except... The third style I put up was for li and this said set the color of the <li> tag to green. Therefore the <li> tags are showing green instead of red. Here I said I wanted all paragraphs which have a tag of <p> to be aliged to the center and to have the size of the font doubled I do this using 2em. 13

14 Now I am going to add an image. I am placing the image in the same directory/folder as the page. If it is somewhere else, I would have to use the entire address to the image to have it show on the page. 14

15 To add the image, I used the <img> tag and said the src (meaning source) is CISa.gif in quotes. Again note that the image is in the same directory/folder as the current page I am looking at. Note that there is no close tag for <img>. 15

16 Now I have decided to center the image. I will do this through CSS. 16

17 The CSS to align an image to the center makes the margins on both sides the same and so it works. 17

18 Now I am setting up a table and giving it color and borders through CSS. 18

19 I am giving the table a solid thick border and each cell a solid thin border. A table is set up using the <table> tag. Inside the <table> tag we use <tr> to layout rows and <td> to layout the cells within the rows (the columns). This table has two rows and each row has two cells making it have two columns. The number of cells in each row should be the same. Note that I put an image in one of the cells. 19

20 margin: auto; centers my table 20

Title: Jan 29 11:03 AM (1 of 23) Note that I have now added color and some alignment to the middle and to the right on this example.

Title: Jan 29 11:03 AM (1 of 23) Note that I have now added color and some alignment to the middle and to the right on this example. Sorry about these half rectangle shapes a Smartboard issue today. To