Please bookmark your URL username.students.cofc.edu/115 Example: smithg.students.cofc.edu/115
Chapter 3 Bare bones notes
A few items from Chap 2 A few other items: A few other items: HTML5 Structural Elements − semantically named elements used to configure specific parts of pages Div − generic container for block elements Span − generic container for inline elements What is difference? Block display elements: normally start (and end) with a new line. Inline elements: Displayed in line with text without creating a new line.
Turn on file extensions In Windows 8 or10: Click View menu. Then checkmark “Display file extensions” In Windows 7: Click that Organize button on the left, then … Mac OS: FINDER, Preferences
Status of the 2 assignments Assignment page: Already graded Chapter 2: We will link today. You can finish uploading by midnight if you have trouble.
ORGANIZATION OF FOLDERS You should have a folder called 115. The rule/idea is that EVERYTHING that will be submitted must go in that folder. Another rule is that each website must have it’s own folder. So far we have: The 115 folder itself It includes your assignment page and banner image. A folder called javajam that’s inside of 115 As you study, you should download the files from the textbook website to practice with. But DO NOT put them in 115 folder. And finally – for each chapter we will create a practice site similar to “semester plans”. DO NOT put those folders in 115 either.
Suggested organization for your main folder.
RELATIVE LINKS Both files on same level: filename.ext Folder on same level as your file: foldername/filename Link to a folder one level up: ../foldername/filename For Example: <img src="banner.jpg" alt="my banner"> Therefore, if you named your files and folders as recommended, your link to Chapter 2 Case Study would be: <a href="javajam/index.html">Chapter 2 Case Study</a> For Example: <a href="../chapter11/canvas.html">Example</a>
Therefore, if you named your files and folders as recommended, your link to Chapter 2 Case Study would be: <a href="javajam/index.html">Chapter 2 Case Study</a> But we’re going to move on to Chapter 3 now, and leave 15 minutes for this at end of class.
Start Chapter 3 What is CSS? What is CSS? A style sheet language used to describe the appearance and formatting of a HTML document. As with other types of styles, several formats can be included in one style. In other words… A group of formats that are setup as a unit and can be applied repeatedly. (generic definition)
Advantages of style More control (more features) Advantages of style More control (more features) Separate from structure Can be re-used (applied to multiple pages; multiple sites) Smaller potentially Easy to edit and maintain
Syntax Selector {property: value; property: value; } h1 {text-align: center; color: #0000ff; } Here is a visual of it:
Types of CSS: Inline: Added as an attribute of an HTML tag and only applies to that individual element. Used to override others. Embedded: Defined in the head area between <style> tags. Applies to the body of that document. External: A separate file which is linked in the <head> section. Used for entire website.
Examples of CSS Syntax & example for inline style: <element style="property: value"> <blockquote style="color: #cc99ee" > Syntax & example for embedded or external: selector {property: value";} p { line-height: 140%; color: #ff00ff; } Link to external CSS file: <link rel="stylesheet" href="yourfile.css">
More on Cascading Style Sheets CSS Selector types HTML element class id Descendant selector – is used to specify an element within the context of its parent or container element. The selectors are written in the order of their embedding, with space between each. E.g. to specify a style of an anchor that is inside a nav element: nav a {color: white; }
Using Color: There are several ways of applying color. Names: modern browsers support140 including extended names (per w3schools.com) RGB: rgb(0,150,220) (the intensity of RGB from 0-255) Hexadecimal: #9400BF -uses base 16. 0-9 and A-F to specify numeric value. -includes 3 pairs, 2 characters for each of red, green and blue with the pattern of #rrggbb Search “hex colors” or “html color names” to get chart, or go to www.w3schools.com/colors/colors_names.asp or webdevfoundations.net/color
Color Scheme Websites Although it would take too much time to examine these during class, be sure to explore them at home and use in your future projects. https://color.adobe.com – Click “Explore” to see schemes. Must copy & paste each hex color individually. https://coolors.co – Best for exploring existing schemes and downloading text version. Click “Explore” then “View”. Then copy the hex color. http://colorpalettes.net – a user-friendly website with attractive palettes based on pictures. You can go to this page to see tagged descriptions of palettes. http://paletton.com – A great and sophisticated website. Best to read the brief instructions on using it. http://www.colr.org – For choosing colors based on a picture.
See table on page 85 to see all that is covered in the chapter.
Practice for Chapter 3: Assume that you offer some kind of service, such as a web designer, and need to create a website to promote your freelance company. Don’t worry about all three pages today, we’ll start simply with home page.
Create folder called “freelance” Practice for Chapter 3 (continued) Steps to begin: Create folder called “freelance” Now that you’ve learned the template code on page 28, I’ll show you a file with the code already written. …wait for it. See page 110-110. We’ll wrap up the page before beginning. In addition to the basic HTML tags and wrapper, the only other elements we’ll use on all pages are: header (which includes an <h1>) nav (along with the actual page links), footer (with text of your choice) link to CSS. …oops. Let’s add main too. Click SAVE! Now on your own, use placeholder text from www.blindtextgenerator.com to create your index.html page: HINT: Save your template.html using “Save As”.
* Background-color of body Practice for Chapter 3 (continued) Before we leave today, let’s get started with CSS by setting the following: * Background-color of body * Background-color of #wrapper - -Hint: use a light color such as: ivory, white, linen, azure, honeydew, snow, or #FAFAFA
CSS Comments /* comments */ And now to February 2… CSS Comments /* comments */ Suggestion: Put your color names or hex codes in comments for quick reference. We will continue adding styles based on the chapter. If we run out of time, you can use these 2 pages as synopses of what were covered: Page 85 is table that shows all of the new styles covered. Page 108 is a good sample CSS.