More advanced HTML and CSS CS 0134 (term 2181) Jarrett Billingsley
Class announcements <head> <meta charset="utf-8"> Most of you turned in lab 1 by now! If you're having trouble, I can help youuuuuuuuuuuuu From now on, try to finish the labs by Thursday nights Lemme know if you don't finish it by then A common mistake I saw: <style> should come inside <head>: <head> <meta charset="utf-8"> <title>Testing</title> <style> ... </style> </head> 9/18/2017 CS 0134 term 2181
More HTML! (this is all inside the <body>) 9/18/2017 CS 0134 term 2181
Block tags and inline tags Everything you put on the page is either a block or comes inline. A block contains things. You can also move it around and arrange the blocks however you want. Wheee! Inline items appear inside the text. Things like bold, italics, links, and images are all inline. 9/18/2017 CS 0134 term 2181
Familiar block tags <header> <h1>Hello!</h1> </header> <main> <p>This is a block. <p>This is another! </main> Hello! This is a block. This is another! Blocks give the page structure. 9/18/2017 CS 0134 term 2181
Unfamiliar inline tags If you wanna make bold or italic text, you can use these: <strong>boom💪</strong> <em>Important!</em> Use these instead of <b> and <i>, if you know about those… If you want extra fancy quotes, use the <q> tag: "Boring quotes" <q>Oooo fancy</q> boom 💪 Important! "Boring quotes" “Oooo fancy” 9/18/2017 CS 0134 term 2181
<a href="http://www.google.com">Google!</a> Making links The <a> tag makes links. <a href="http://www.google.com">Google!</a> The text between the tags is what the link looks like. The text in the quotes is where the link will go. You gotta put the http:// if you want to go to another site. Otherwise, it'll do something silly. If you wanna open the link in a new tab… <a target="_blank" href="http://www.google.com">Google!</a> 9/18/2017 CS 0134 term 2181
Pitbulls Samoyeds Shibas Jumping around You can link to different parts of a page. To do this, first you have to put an ID on the thing you wanna link to. <h2 id="pit">Pitbulls</h2> Then, make a link and set its href to the ID with a # in front of it. <a href="#pit">Pitbulls</a> The Dog Page Pitbulls Samoyeds Shibas Pitbulls Pitbulls are sweet puppers that everyone is scared of for some reason. Samoyeds Samoyeds are actually the offspring of a cloud and a dog. Shibas Shiba Inu (or "shibes") are the sassiest of all dog breeds. 9/18/2017 CS 0134 term 2181
A dog: <img src="dog.jpg"> Images! <img> puts an image inline (inside the text). Kinda weird. A dog: <img src="dog.jpg"> That looks a little strange… The src says what file to use (just like href in <a>). You also have to put an alt, which is a description of the image for people and browsers who can't see images. <img src="dog.jpg" alt="A very happy dog"> A dog: 9/18/2017 CS 0134 term 2181
<img src="dog.jpg" alt="" width="300"> MY IMAGE IS WAY TOO BIG You can use width or height to change that. <img src="dog.jpg" alt="" width="300"> <img src="dog.jpg" alt="" height="200"> But if you use both width and height, you might end up with this… 9/18/2017 CS 0134 term 2181
A dog:<br><img src="dog.jpg"> Breaking things up Usually you'll use <p> to go to a new line (a new paragraph). Sometimes, you need to do it manually. <br> does that. A dog:<br><img src="dog.jpg"> That's better! Later we'll learn another way to make images stand out from the text. A dog: 9/18/2017 CS 0134 term 2181
Beat eggs Add milk Juice Bread Lists <ol> <li> Beat eggs Ordered lists <ol> have numbers: <ol> <li> Beat eggs <li> Add milk </ol> Unordered lists <ul> have bullets: <ul> <li> Juice <li> Bread </ul> <li> stands for "list item". Beat eggs Add milk Juice Bread 9/18/2017 CS 0134 term 2181
Lists are more common than you'd think… We'll learn about how to make lists do all sorts of things. Navigation bars Whatever this is Image galleries 9/18/2017 CS 0134 term 2181
Lab: improving your page from last time 9/18/2017 CS 0134 term 2181
More CSS! 9/18/2017 CS 0134 term 2181
One CSS file, many HTML files Usually, we keep our CSS and HTML in separate files. body { background: white; } style.css change the CSS… body { background: blue; } style.css Page 1 Page 2 Page 3 Page 1 Page 2 Page 3 9/18/2017 CS 0134 term 2181
<link rel="stylesheet" href="mystyle.css"> Linking to a CSS file Make a new file, and save it as mystyle.css in the same place as your index.html file. Now cut all the stuff from between the <style> tags and paste it in that new file. Now you can replace the <style></style> tags with: <link rel="stylesheet" href="mystyle.css"> These <link> tags always go in the <head>, and don't make the links we're used to… I know, I know. Be sure to File>Save both files before reloading in your browser. 9/18/2017 CS 0134 term 2181
The space between the boxes is the margin. The Box Model Every block tag in your HTML gets its own box. It has four parts. This black box is the border. The pictures are the content. The colored space is the padding. The space between the boxes is the margin. 9/18/2017 CS 0134 term 2181
Measuring things img { width: 50%; padding: 4px; border: 2em; When we wanna change the size of any of these things, we have to define the size somehow. We can stick these units at the end of our measurement numbers: img { width: 50%; padding: 4px; border: 2em; margin: 1rem; } % means "percent of whatever block I'm inside of." px means "pixels." em is based on the current font size. rem is based on the size of the <body>'s font. 9/18/2017 CS 0134 term 2181
Changing the size of blocks Any block element can have its width and height changed. You can also set a minimum and maximum for either of them. Let's see what this does… body { width: 50%; min-width: 600px; max-width: 900px; } 9/18/2017 CS 0134 term 2181
This will make the image repeat like a tiled floor! Backgrounds Inside the border, and behind the content, is the background. .shibe { background: #B9CDE5; } You can also put an image as the background: body { background: url("bg.png") repeat; } This will make the image repeat like a tiled floor! 9/18/2017 CS 0134 term 2181
Spacing things out with margins Each side of every box can have its own margin. 1px .shoob { margin: 1px 2px 3px 4px; } T R B L TROUBLE! 4px 2px If you just put one value, it sets all 4 sides: img { margin: 3px; } 3px 9/18/2017 CS 0134 term 2181
Centering things margin: 0 auto; width: 500px; text-align: center; If you want to center a block, set the margin and width like so: margin: 0 auto; width: 500px; If you want to center text, you have to put this rule on whatever contains the text: text-align: center; 9/18/2017 CS 0134 term 2181
border: 3px dashed grey; Borders! The border property has three parts: the thickness, the style, and the color: border: 3px dashed grey; Solid, dotted, and dashed are probably the most common styles. You can also just put a border on one side, like this: border-left: 2px solid blue; 9/18/2017 CS 0134 term 2181
Making links look better Links look crappy by default. If you wanna get rid of the underline: a { text-decoration: none; } But you should make them stand out better if you do. You can change the style of unvisited links with: a:link, a:active { whatever } You can change the style when you hover your mouse over with: a:hover, a:focus { whatever } You can change the style of visited links with: a:visited { whatever } 9/18/2017 CS 0134 term 2181
Lab: better CSS! 9/18/2017 CS 0134 term 2181