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.

Size: px

Start display at page:

Download "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."

Heather Hoover
5 years ago
Views:

1 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.

2 Sorry about these half rectangle shapes a Smartboard issue today. To add style to a page I put the style tag inside the <head> and I tell it that the style is type="text/css" since we are using cascading style sheets (css). Note to set a style for something I use the word that is used in the tag, in this example body, h1 (a header) etc. I enclose the style in curly braces and then I specify the property I want to style such as background color and how I want to style it, in this case beige. I also used color (which is font color) and set the default font color for the page to brown. Style that I put in for the headers etc redid the color for those elements. Title: Jan 29 11:09 AM (2 of 23)

3 Any h1 headers will be red and aligned to the center. Anything within the ul which would be all of the li tags, will be changed to red. Any h2 headers will he blue and aligned to the right. Title: Jan 29 11:13 AM (3 of 23)

Note the lines at the top of the page are paragraphs and I am saying I want them aligned to the center and the font size twice normal. Th red is because the default color for the whole body is red.

4 Note the lines at the top of the page are paragraphs and I am saying I want them aligned to the center and the font size twice normal. Th red is because the default color for the whole body is red. The img tag has a src= which tells what image to use. Note like <br> there is no close to <img>. Now I am adding an image. Note that the image is named CISa.gif and so the browser can find it, it should be stored in the HTML5 directory which also contains the page HTML5CSSimage.html. In other words, the image and the page should be in the same directory. If you do not do this you will need a path to locate the image. Title: Jan 29 11:20 AM (4 of 23)

5 In one of the previous examples I used ul to change the color of the list. Here I used li to change the color of all li tags on the page. This is the style that you should use if you want your image to be centered. Note I have an error here but it still works. I have a </p> but I do not have a <p> so there is no paragraph to close. Title: Jan 29 11:25 AM (5 of 23)

6 This is a table and it is aligned to the center. Note that the table has two rows and each row has two cells. Title: Jan 29 11:28 AM (6 of 23)

7 This centers the table and puts a solid thick border around it. The td means a solid think border goes around each cell. <table> sets up a table and the <tr> makes a row. Within the row I have two cells each done with a <td>. The size of the table is determined by its content. Title: Jan 30 4:08 PM (7 of 23)

8 Title: Jan 29 11:35 AM (8 of 23) Someone asked about colors and these are some of the colors you can use. You can use them by name or by putting in the hex code.

9 Title: Jan 29 11:38 AM (9 of 23) Now we are going to start to look at how to upload your page to the server so it can be seen using a browser. To do this we will use WinSCP. Note that you can download WinSCP to use on your own computer.

10 Title: Jan 29 11:41 AM (10 of 23) I lost the c someplace. The host is cisweb.bristolcc.edu. Then enter your username and password. Leave everything else as it is.

11 Once you login, click on public_html to work there. The cisweb server. Your computer and devices. Title: Jan 29 11:42 AM (11 of 23)

12 Title: Jan 29 11:44 AM (12 of 23) I decided to make a folder to store my pages in you do not have to have a folder, but I think it is a good idea. Click on Files/New/Directory to make a new Directory/Folder. It asked me to name it and I called it CIS120S15.

13 Title: Jan 29 11:46 AM (13 of 23) Now I am inside the folder I created and I am dragging an html page over. I will click copy and it will be stored on the server.

14 Title: Jan 29 11:47 AM (14 of 23) I now have the file on the server in my directory. I right clicked and selected edit to see the code. Note that I can change the code here as well.

15 Title: Jan 29 11:51 AM (15 of 23) Now I want to see my page in a browser so this is the address I provide. It is the host, followed by the ~ and my username, followed by a folder since I used one, followed by my file.

16 Title: Jan 29 11:52 AM (16 of 23)

17 Title: Jan 29 11:52 AM (17 of 23)

18 Title: Jan 29 12:04 PM (18 of 23) Our next topic is Access 2013 which can be downloaded from Dreamspark. Here are directions.

19 Title: Jan 29 12:05 PM (19 of 23)

20 Title: Jan 29 12:07 PM (20 of 23) Here is a quick peek so you can check it out if you download it. We will start to look at Access 20 from the beginning on Tuesday. You do not need to download it, you can use it in our labs,

21 Title: Jan 29 12:07 PM (21 of 23)

22 Title: Jan 29 12:11 PM (22 of 23)

23 Title: Jan 29 12:11 PM (23 of 23)

HTMLnotesS15.notebook. January 25, 2015

HTMLnotesS15.notebook. January 25, 2015 The link to another page is done with the