AP CS P. Unit 2. Introduction to HTML and CSS

Size: px

Start display at page:

Download "AP CS P. Unit 2. Introduction to HTML and CSS"

Winifred Cain
5 years ago
Views:

1 AP CS P. Unit 2. Introduction to HTML and CSS HTML (Hyper-Text Markup Language) uses a special set of instructions to define the structure and layout of a web document and specify how the document should be displayed in a browser. Initially developed around 1990, HTML has gone through several revisions. This focuses on HTML 5. Ex. 1 Go to repl.it and sign up. If given a choice, select New Web Repl. Otherwise, we are selecting HTML/CSS/JS. Eventually your screen should look like the one below. We will not have time to cover JavaScript in this unit so delete index.js and replace the statement: <script src="index.js"></script> with Hello World index.html should now look like this: <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="index.css" rel="stylesheet" type="text/css" /> Hello World Do the following: Click the run button and see your page displayed in the result tab. Click ( Open in a new tab ) to see the page displayed in its own tab. Leave this tab open. Change <title>repl.it</title> to <title>your name</title> and refresh your page that is in its own tab. Add more text after Hello Word. Right-click on the page and select view page source 1

2 Some vocabulary and explanations <blah> something something </blah> An normally consists of an opening, a closing, and whatever comes between them. Some elements consist of a single tag. For example: <meta charset="utf-8"> Our web pages will follow the following format: (Technically not a tag) Exactly one html element <html> <head> information about the page meta tags provide metadata about the web page content Exactly one body element Exactly one head element <html> <head> <meta charset="utf-8"> defines the character encoding scheme used * <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="index.css" rel="stylesheet" type="text/css" /> Hello World to be explained later to be explained later * Very good article, from 2003, about this. The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!) 2

3 HTML file contains tags and content The browser (e.g. Chrome, Firefox, etc.) software reads the file and displays the content. Hello World Paragraph and Heading Elements. Ex. 2 italics. Change the content between the body tags to the following. You should customize anything in <h1>your Name s Home Page</h1> <p>this is a work in progress</p> <h2>monday</h2> <p>say something about Monday (lots of words so it wraps around)</p> <p>say something else about Monday (lots of words so it wraps around)</p> <h2>tuesday</h2> <p>say something about Tuesday (lots of words so it wraps around)</p> <p>say something else about Tuesday (lots of words so it wraps around) </p> View the contents in a separate tab. Do the following and then answer the questions below. Remove all line breaks from the above code so that it looks this: <h1>your Name s Home Page</h1><p>This is a work in progress</p><h2>monday</h2><p>say something about Monday. </p><p>say something else about Monday. </p><h2>tuesday</h2><p>say something about Tuesday. </p><p>say something else about Tuesday. </p> Refresh your web page to see what effect these changes made. Add lots of spaces and line breaks randomly throughout the source code but NOT in the tags. The result could look something like this: <h1>your Name s Home Pa ge </h1><p>t h i s is a work in progress</p> <h2> Monday</h2> <p>say something a b out M on day. </p> <p> Say something else about Monday. </p> <h2> T used ay </h2> <p> Say something a bout Tuesday. </p> <p>say something else abo ut Tuesday. </p> The term whitespace refers to spaces, new line characters (from hitting the Enter key), and tabs. If there are five whitespace characters in a row in the source code, the TRUE FALSE browser only displays one. Line breaks in the source code are treated as spaces by the browser when it TRUE FALSE comes to determining what to display. If there are 3 consecutive whitespace characters in a row, the browser TRUE FALSE deletes two of those characters from the source code. A paragraph element always starts on a new line. TRUE FALSE A heading element does NOT always start on a new line. TRUE FALSE 3

4 There are six heading elements. <h1> is supposed to be the most important heading; <h6> the least important. If we use the analogy of a text book <h1> would be used for the title of the book <h2> would be for each chapter in the book <h3> would be for each major section in each chapter and so. Here is an interesting article about these tags: IMPORTANT. Do NOT use h1, h2, etc. just to make something bold or larger than other text. Good websites use HTML tags to identify the purpose/meaning of the content - not for stylistic reasons. CSS (Cascading Style Sheets) is the proper technology to use to determine how to display a web page. Ex. 3 Clean up the content in the body element so it looks something like what we had at the beginning of exercise 2. Then add the following to the index.css file. index.css body of the html page body{ <h1> text</h1> background-color: LightGoldenRodYellow ; <p>text text text text text text text text text <h2>text</h2> p{ <p>text text text text text text text text text color:darkslategray ; <p>text text text text text text text text text h1, h2{ <h2>text</h2> font-size: 20px; <p>text text text text text text text text text text-align: center; font-weight: normal; <p>text text text text text text text text text color:darkslategray ; Run/update the web page. Notice that as you change the width of the page, the heading elements stay centered. Your browser has a default style sheet for determining how to display the body elements. Your CSS file overrides those default styles. Each CSS statement follows this format selector { attribute : value; attribute : value; The selector determines which elements style is being defined. For now, the selector is an element or list of elements but there are more options. There are many different attributes to choose from and generally many different values and ways to express those values. We will just scratch the surface of CSS in this unit. 4

5 Ex. 4 Go to We will be using this site a lot. Look at the CSS Colors section and change the background color of the body and color of the text in the headings and paragraphs. Notice that colors can be specified in a number of ways. Look at the CSS Fonts section and change the font that is used for the paragraphs. For practice sake, use a different font family for the headings. See the note below about fonts. Increase the font size of all elements. Important: you should specify a list of fonts as in this example: p { font-family: "Times New Roman", Times, serif; This means that the browser will first try to use Times New Roman. If that font is not supported, it will try Times. If that is not supported, it will use a generic serif font. The list of font types should be similar. This list gives some common combinations: Links. The following exercise will show you how to link to other sites as well as other pages in your own web site. Ex. 5 Create a new file and name it page2.html Copy the code below into index.html and page2.html index.html page2.html <html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>your name</title> <link href="index.css" rel="stylesheet" type="text/css" /> <h1>home Page</h1> This is a <a href="page2.html">link to page 2</a>. <html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>your name</title> <link href="index.css" rel="stylesheet" type="text/css" /> <h1>welcome to Page 2</h1> <p>yes, this is page 2.</p> Click <a href="index.html">here</a> to go to the home page. Click <a href =" here</a> to go to W3Schools. Inside the <a> tag is an attribute-value pair href= url of another page href is the attribute. The value is either an absolute address (full URL) or relative address. The value should always be in quotes. Also notice that the <a> does not generate line breaks because it is considered an in-line element. Block elements, such as <p> and <h1>, do generate line breaks. Ex. 6 Modify your website so that you have a total of three different html pages. Add links so that users can move from one page to the other. On one of the pages you should have a list of at least three useful/fun/random links to other sites. One of the links to be to another classmate s repl.it website. 5

6 Comments are good way to hide additional information in the source code without it effecting how the page is displayed. In html, a comment looks like this  < followed by! followed by two hyphens --- (with no spaces) comments two hyphens followed by > Ex. 7 Add a comment to your index page, on the line just below the doctype declaration. The comment should include your first name, last initial, the date you added the comment, and whatever else you re in the mood to enter. Ex. 8 View your index.html in its own tab on your desktop computer or laptop. Then view it on your phone or a classmate s phone. It should look a little different on your phone but still good. Next, comment out the meta tag that mentions name and viewport. When done, it should look like this:  Refresh the page on the desktop computer. It should not look much different. Refresh the page on your phone. Oh boy! There are many techniques to designing a webpage that looks good on different sized devices. The above meta tag helps some and that s why it s there. Please uncomment it. Images. Here is an example of how to display an image. <img src="square.png" alt="purple square"> It is a single tag with two attribute-value pairs. The first pair identifies the image and second pair provides a brief text description of the image. In a separate worksheet you will explore and learn about the basics of copyrights public domain copyrights and fair use creative commons Bottom line regarding using graphics, audio, video, or anything that someone else created. Always give credit where credit is due. If explicit permission is required, get it or don t use the material. For this course, you must indicate where you got your graphics. Put a link or comments near the graphics. If that makes your page look bad, then put this information in a comment in your code. Ex. 9 Create a new html file and display three images. Each image should be on its own line and centered on the page. Do this by wrapping each <img> tag in a paragraph element. Then use CSS to center anything in a paragraph (which, of course, is usually text but this time is a picture). Be sure to identify where you got each picture. If these are all pictures you took with your phone or drew, be sure to say that. ALSO, turn the last picture into a link to another site (whichever site makes sense to you). While I did not explicitly tell you how to do that, you can figure it out. 6

CSS Classes. Up to this point, when we applied a CSS style to an HTML element, it applied to all of those elements. For example, p { color: red; makes the text in all paragraphs red.

7 CSS Classes. Up to this point, when we applied a CSS style to an HTML element, it applied to all of those elements. For example, p { color: red; makes the text in all paragraphs red. If you need only some of the paragraphs to be red, do this:.red-text { The CSS class name is arbitrary but cannot contain a space. color: red; The period at the start is NOT part of the name. Then, change the appropriate paragraph elements by adding an attribute-value pair as follows: Somewhere in the body element <p class="red-text">this text is red.</p> <p>this text is not red.</p> <p class="red-text">this text is red.</p> <p>this text is not red.</p> Notice that the class name does not include the period. Ex. 10 Create a page similar to the one below. There are 7 paragraphs, one h1 heading, and two h2 headings. The CSS file has two class selectors. One displays the text in italics and one displays it underlined. You can find how to do that under the CSS Text and CSS Font sections of W3Schools CSS tutorials. 7

Ordered and Unordered Lists. HTML elements are supposed to reflect the meaning of the content. For instance, an h1 element is supposed to indicate a major topic of the page.

If the order of the items is important (e.g. they are directions), then use an ordered list. <p>directions from C168 to Mr. Savitz's room</p> <ol> <li>turn left out the door.</li> <li>go up the steps.

8 Ordered and Unordered Lists. HTML elements are supposed to reflect the meaning of the content. For instance, an h1 element is supposed to indicate a major topic of the page. It is not supposed to be used because the designer wants the text to be big and bold - that s what CSS is for. The idea of a list is a collection of related items. If the order of the items is important (e.g. they are directions), then use an ordered list. <p>directions from C168 to Mr. Savitz's room</p> <ol> <li>turn left out the door.</li> <li>go up the steps.</li> <li>his room is about 30 feet down the hall on your right.</li> </ol> An unordered list looks the same except that we begin and end with <ul> and </ul> instead of <ol> and </ol> <p>actual standard color names in CSS</p> <ul> <li>tomato</li> <li>burlywood</li> <li>papayawhip</li> </ul> Ex. 11 Create web page that contains an unordered list of favorite websites. Use CSS to change the default look. There s an example to the right. Div Tags were introduced as a way of grouping related, adjacent elements together. It is a nonsemantic element because it tells you nothing about the meaning of its content. They are designed to be used with CSS styles. Here s a very brief example. <div> text and other elements. </div> HTML 5 introduced many more descriptive tags that should be used in place of div tags but div tags are still used in a lot of different situations. They are simple to use. 8

9 Ex. 12 Create the page below. There is one h1 element, two h2 elements, four paragraphs (the first one is wrapped around the link), and one div element. The div element has a border and a colored background. 9

Downloads: Google Chrome Browser (Free) - Adobe Brackets (Free) -

Week One Tools The Basics: Windows - Notepad Mac - Text Edit Downloads: Google Chrome Browser (Free) - www.google.com/chrome/ Adobe Brackets (Free) - www.brackets.io Our work over the next 6 weeks will