CS 0134 (term 2181) Jarrett Billingsley Basic HTML and CSS CS 0134 (term 2181) Jarrett Billingsley
Class announcements Welcome back lol The first week didn't count towards your grade! Today is the first "real" lab. If you forgot the stuff about uploading your site, that's fine! Check out the "Lab0" link in the site schedule. These slides are linked from the course site. You can open them up to follow along or refer back to. 9/11/2017 CS 0134 term 2181
HTML Basics 9/11/2017 CS 0134 term 2181
What's HTML? Hypertext Markup Language is the computer language used to define the structure and content of a webpage. The header and links at the top The colors, fonts, spacing between things etc. are defined by CSS. If I turn it off… The text on the page Images and other media 9/11/2017 CS 0134 term 2181
<em>emphasized text</em> Tags, tags, tags HTML files contain text and tags: text is the text on your page, and tags control how it looks. A tag looks like this: <br> Most kinds of tags come in pairs. A closing tag has a / before the name, and they surround stuff: <em>emphasized text</em> Think of them like (parentheses)! If you forget a closing tag, often it still works fine, but other times it's a problem. 9/11/2017 CS 0134 term 2181
Nesting and structuring Tags can be nested: put inside one another. This is how we can make a whole complex page. An article… which contains an image… and some text…. and a button… etc. 9/11/2017 CS 0134 term 2181
Under the hood <!doctype html> <html> <head> Every HTML file has a structure required by the HTML specification. This weird line says that we're using HTML5. <!doctype html> <html> <head> </head> <body> </body> </html> The <head> tag contains information about the page. The <html> tag surrounds the rest of the file. Don't forget it! The <body> tag contains the page contents – text, images, links, layout, etc. 9/11/2017 CS 0134 term 2181
Valid and invalid <html> <head> </head> <body> The browser is picky about how HTML is written. (It's not smart.) What's wrong with these? <html> <head> </head> <body> </body> </html> <!doctype html> <html> <head> <body> </body> </html> <!doctype html> <html> <head> <body> </head> </body> </html> 9/11/2017 CS 0134 term 2181
A little help… The W3C Markup Validator is a great tool for making sure your HTML files are valid. Check the course site – I linked it at the top. You can either upload your file or copy all of it and paste it. Many of the errors are hard to read for newcomers… But it's a lot better than nothing. Why bother validating? It helps you see where your mistakes are. Valid HTML code will behave consistently on all browsers. It gives you a warm fuzzy feeling when there are no errors :D 9/11/2017 CS 0134 term 2181
Starting your HTML document You know the icons and names in the tabs? The <head> does that, and other stuff! The very first thing in the <head> should be: <meta charset="utf-8"> The title (the name in the tab) is also required: <title>CS 0134</title> The icon isn't required ;) but it's a little wordy: <link rel="shortcut icon" href="file.png"> "file.png" is the name of an image file to use. It should be in the same folder as the HTML file. 9/11/2017 CS 0134 term 2181
A really common page layout Lots and lots of pages look generally like this: HTML makes this easy! Put this in the <body>: header navigation main footer <header> </header> <nav> </nav> <main> </main> <footer> </footer> This is totally different from the <head> tag!! You can put these in any order you want, but usually you'll put them in this order. (Who puts a footer at the top?) 9/11/2017 CS 0134 term 2181
<h1>The Title of my Page</h1> Headings You can put titles on things with headings. The code looks like: <h1>The Title of my Page</h1> You can use <h1> through <h6>. Don't try to make "big text" using headings. CSS will help us there. Don't pick a heading based on the text size. Again, CSS will help. Think of headings like an outline for a paper. <h1> for the big points, <h2> for the points under those, etc. 9/11/2017 CS 0134 term 2181
<p>This is paragraph one. <p>This is paragraph two! Making text work right If you put this inside the <main> in the <body>… This is paragraph one. This is paragraph two! It will show up as one line in your browser, like: This is paragraph one. This is paragraph two! That's… probably not what you want. To start a new paragraph, put the <p> tag at the beginning of it: <p>This is paragraph one. <p>This is paragraph two! 9/11/2017 CS 0134 term 2181
Lab: making a valid HTML file (with actual content!) 9/11/2017 CS 0134 term 2181
CSS Basics 9/11/2017 CS 0134 term 2181
What's CSS? Cascading Style Sheets are the computer language used to define the aesthetics of your page - colors, fonts, alignment, that kind of stuff. It's a separate language from HTML and looks pretty different. As an example of how important CSS is, here's the course site without it: 9/11/2017 CS 0134 term 2181
h1 { font-size: 200%; font-weight: bold; } CSS Rules A CSS file contains rules. A rule has two parts, and looks like this: h1 { font-size: 200%; font-weight: bold; } This is the selector. It chooses which things will be affected by this rule. This is the declaration block. This changes the properties of the selected items. You can put lots of things in here! 9/11/2017 CS 0134 term 2181
Where do we put the CSS? <head> ... other stuff ... We can put it in our HTML's <head> tag, in a<style> tag: <head> ... other stuff ... <style> h1 { font-size: 200%; font-weight: bold; } </style> </head> 9/11/2017 CS 0134 term 2181
Picking and choosing When you want to pick which things to style, it can be a pretty complicated process. The link text is blue and bold. The first row and column are blue. Today is red. Special lectures are yellow. 9/11/2017 CS 0134 term 2181
Very serious slide about classes A class (as in classify) is a group of things with a shared feature. 9/11/2017 CS 0134 term 2181
In HTML, you can put class="anything" inside any opening tag you want. CSS Classes A class in CSS is a way of putting things into categories to make them easier to select with a rule. In HTML, you can put class="anything" inside any opening tag you want. In CSS, a rule that uses .anything as a selector will apply to all those tags. <h1 class="special"> This is a fancy header!</h1> <p class="special">This is a fancy paragraph. Oooooh. .special { color: red; font-family: fantasy; } 9/11/2017 CS 0134 term 2181
<img id="site_logo" src="logo.png"> CSS IDs If you have something unique, you can give it a name: an ID (identifier). Unlike classes, you can't use an ID more than once on the page. (Cause it's a name.) site_logo <img id="site_logo" src="logo.png"> HTML: #site_logo { border: 2px solid black; } CSS: 9/11/2017 CS 0134 term 2181
Some basic text CSS properties You can change the font with the font-family property: font-family: serif; gives something like this. font-family: sans-serif; gives something like this. font-family: fantasy; gives something like this. font-family: "Impact"; uses the Impact font. You can color the text with the color property: color: red; makes it this color! color: limegreen; makes it this color! You can make it bold, italic, or underlined with: font-weight: bold; font-style: italic; text-decoration: underline; 9/11/2017 CS 0134 term 2181
Styling the <body> tag You can set the "overall style" by styling the <body> tag. Some examples: body { background-color: linen; width: 900px; margin: 0 auto; } What does this do? ;) Makes the page a nice width. Centers the page on the screen. 9/11/2017 CS 0134 term 2181
The inspector All modern browsers have an inspector. This lets you see all kinds of information about the page. Try right-clicking on something and choosing "Inspect"! (Safari has to enable this with an option.) This is really helpful for seeing how parts of a page fit together. And for figuring out why things aren't showing up right. Check the "Rules" panel on the right. 9/11/2017 CS 0134 term 2181
Lab: making it stylish 9/11/2017 CS 0134 term 2181