HTML/CSS Codeacademy
Some self closing tags
<img src="*link*"/> <link type="text/css" rel="stylesheet" href="_____.css"/>
Remember, <img> tags are one of the few tags in HTML that are self-closing.
<img src="URL" /> Notice: the forward slash
Put up an Image
<img src="picture URL" /> ** Image Source **
Create a list 1) raindrops 2) kittens 3) call of duty
<ol> <li>raindrops</li> <li>kittens</li> <li>call of duty</li> </ol>
<ol> .vs. <ul>
<ol> </ol> = Ordered List, Numbers <ul> </ul> = Unordered List, BulletPoints
By default, table cells take up 1 column. If we want a table cell to take up the space of 3 columns instead of 1, we can set the colspan attribute to 3.
<th colspan="3"> </th> Note: this makes th take up 3 columns across!
HTML is a _______ ________. A _______ ________ is a programming language used to make text do more than just sit on a page: it can turn text into images, links, tables, lists, and much more.
markup language
An _______ _______ is simply a list that is numbered. We begin the ordered list with the opening tag _____
ordered list <ol>
Lessons Learned -->
* Write an HTML comment * Create a list (ordered and unordered) * Make text stand out using <em> and <strong> * Change the color, size, and alignment of text using * the style attribute * Create HTML tables
Topics We've Learned about CSS
1) What CSS is 2) Why we separate form from function 3) CSS syntax, including (multiple) selectors, (multiple) property-value pairs, and comments 4) Details of how colors, font sizes, and font families work
How do you comment stuff out in HTML? How do you comment stuff out in CSS
<!-- --> /* */
How to make a comment in HTML
<!-- comment -->
a) Always put ___________ on the first line. This tells the browser what language it's reading b) Always put ________ on the next line. This starts the HTML document. c. Always put ______ on the last line. This ends the HTML document.
<!DOCTYPE html> <html> </html>
Use the image http://sd.keepcalm-o-matic.co.uk/i/keep-calm-and-do-the-macarena-8.png Attach the hyperlink http://codeacademy.com
<a href="http://www.codeacademy.com"> <img src="http://sd.keepcalm-o-matic.co.uk/i/keep-calm-and-do-the-macarena-8.png"> </a>
Create a hyperlink
<a href="website URL"></a> ** Attach Hypertext Reference **
An image within a hyperlink
<a href="website URL"><img src="picture URL" /></a>
The ___ tag is the one used to make hyperlinks (or just links) on webpages. These are the words or images you click to go to a new page!
<a>
Make the <body> have a brown background
<body style = "background-color:brown">
Create 3 blocks using <div> and set the width and height to be 50px. Make the first block be highlighted in red, blue, and green respectively.
<div style="width:50px; height:50px; background-color:red"></div> <div style="width:50px; height:50px; background-color:blue"></div> <div style="width:50px; height:50px; background-color:green"></div>
As you can probably guess, the smart use of ________ will eventually allow you to create visual HTML objects like sidebars, menus, and more. Just like with images, you can make <div>s clickable by wrapping them in <a></a> tags
<div> ** very important for HTML-CSS communication!
One of the most versatile structure tags available to you is the _______ ______ tag. Short for "division", allows you to divide your page into containers (that is, different pieces)
<div></div>
Aside from bolding words, we often want to italicize words for emphasis. What command would we use??
<em> </em>
a) Make the <h1> centered b) Left c) Right
<h1 style="text-align:center"> <h1 style="text-align:left"> <h1 style="text-align:right">
give our paragraphs headings using heading tags. Let's start with the ______ tag, which marks something as the most important. (Everyone knows the most important font is the biggest!)
<h1>
Change the <h2> into the color green with font 12px
<h2 style="color: green; font-size:12px"> Notice: separated by a semi colon
Change the <h2> into the color red
<h2 style="color:red">
Make the <h3> heading aligned center.
<h3 style = "text-align:center"
Style and <h4> tag with 16px Garamond font
<h4 style="font-size:16px; font-family:Garamond">
How to input images
<img src="url"/>. Note: Make sure to put the url in quotes. Also add in the forward slash, /
Put a ______ tag between the <head></head> tags of your HTML page. Your <link> tag needs three attributes: 1) A type attribute that should always be equal to ______ 2) A rel attribute that should always be equal to "stylesheet" 3) A href attribute that should point to the web address of your _______ _______
<link> "text/css" "stylesheet" CSS file ** <link type="text/css" rel="stylesheet" href="_____.css"/>
Put a _______ tag between the <head></head> tags of your HTML page. Your <link> tag needs three attributes: 1) A _______ attribute that should always be equal to "text/css" 2) A _______ attribute that should always be equal to "stylesheet" 3) A ______ attribute that should point to the web address of your CSS file
<link> type rel href ** <link type="text/css" rel="stylesheet" href="_____.css"/>
<p>A truly spectacular paragraph!</p>
<p style = "font-size:20px; color:blue; font-family:Garamond">A truly spectacular paragraph!</p>
Turn them into 10px, 20px, and 40px respectively. <p> tiny tiny </p> <p> medium medium </p> <p> big big </p>
<p style="font-size: 10px"> tiny tiny </p> <p style="font-size: 20px"> medium medium </p> <p style="font-size: 40px"> big big </p>
_________ allows you to control styling for smaller parts of your page, such as text. For example, if you always want the first word of your paragraphs to be red, you can wrap each first word in <span></span> tags and make them red using CSS!
<span> ** very important for HTML-CSS communication!
Make text bold
<strong> </strong>
There are two ways to put CSS in one place. This first is to put your CSS between ________ _______ tags, right in the same file as your HTML. These <style> tags go inside the <head></head> of your webpage
<style></style>, <head></head> ------------- <head> <style> p { color: purple; } </style> <title></title> </head> ** Turned all <p> content to the color purple
Add a 1px border to <table>
<table border = "1px"> </table>
Table data is represented as ________ which adds a cell to the first row, essentially creating a single column. <td>
<table border="1px"> <tr> <td>One</td> </tr> <tr> <td>Two</td> </tr> </table> Note: We have two rows and one column (containing two element)
important structural aspects of HTML: ________, ________, and _______
<table>, <div>, <span>
To make our table look a little more like a table, we'll use the ______ and ______ tags. These go within the <table> tag and stand for table head and table body, respectively.
<thead> </thead>, <tbody> </tbody> ------------- <table> <thead> </thead> <tbody> <!-- put table rows and table data within --> </tbody> </table>
We use the ______ tag to create a table row. We'll learn how to create columns shortly, and everything will start to come together. **(You don't really create columns in <table>s: instead, you tell each row how many cells to have, and that determines your number of columns).
<tr>
Remember, you create table rows with _______ ________. You can create table header cells with ______ ______. Note: both must be contained within the <thead>
<tr> </tr> <th> </th> ---------------- <thead> <tr> <th></th> <th></th> </tr> </thead> Note: we have 1 table head with 2 table headers. The table headers function as columns
Create a template for an unordered list containing 3 items. Note: uses bullet points
<ul> <li> </li> <li> </li> <li> </li> </ul>
HTML + CSS = ______
BFFs
______ tells the program where HTML elements should go, what color they should be, how big they should be, and more.
CSS
_______ (which stands for Cascading Style Sheets) is a language used to describe the appearance and formatting of your HTML.
CSS
CSS
Cascading Style Sheets. Think of it like skin and makeup that covers the bones of HTML.
Note: If you're having trouble with your font sizes, reset your browser's zoom by pressing _______ or _______.
Cmd-0, Ctrl-0
Every webpage you look at is written in a language called ____. You can think of ____ as the skeleton that gives every webpage structure.
HTML, HTML
How to turn an image into a link
Here's how to turn an image into a link: put a <a href="URL"> tag before your <img> tag and a </a> tag after them.
HTML
HyperText Markup Language. Hypertext means "text with links in it." Any time you click on a word that brings you to a new webpage, you've clicked on hypertext!
________ _______ simply means we can do some styling in our HTML file without worrying about a separate CSS file! We'll learn this first because it will make learning CSS a lot easier later.
Inline CSS
_________ are very useful. We use them to store tabular data so it is easy to read! When you want to present information neatly in a table with rows and columns—you guessed it—the _________ tag is what you need.
Tables, <table>
em
The font-size unit em is a relative measure: one em is equal to the default font size on whatever screen the user is using. 1 em is the normal font size you use
URL stands for?
Uniform Resource Locator
In the stylesheet.css tab, give your a selector a color of #cc0000 and a text-decoration of none.
a { color:#cc0000; text-decoration:none; }
We can give tags more instructions by including ___________ in the opening tag. An __________ is simply a characteristic or some description for the content in the element.
attributes, attribute
The _____ goes inside the html tags, but not inside the head tags, like this: <html> <head></head> <body></body> </html>
body
Many HTML elements support the _______ property. This can be especially useful with tables. The ______ property in turn supports several values. For example, for a border 2 pixels thick, solid, and red, you'd type...
border, border ------------ selector { border: 2px solid red; }
We say these style sheets are __________ because the sheets can apply formatting when more than one style applies. For instance, if you say all paragraphs should have blue font, but you specifically single out one paragraph to have red font, CSS can do that!
cascading
Our table is missing a title. We want to add a title row that goes all the way across the top. To do so, we need to use the __________ attribute for the <th> tag.
colspan
On you CSS style page, set your <div> to have a background-color of #cc0000, height of 100px, and width of 100px
div { background-color:#cc0000; height:100px; width:100px; }
When we put content between the tags, the entire bit is called an ________. element = <opening tag> + content + <closing tag>
element
Search for "hex color palette" or "hex color picker" with your favorite web browser to find a bunch of options!
hex color palette hex color picker Note: Hex values always start with a pound sign (#), are up to six "digits" long, and are case-insensitive
Meaning of 'href' ?
href stands for "hypertext reference." Note: text you can click on
The following represents what? <ol> <li> </li> <li> </li> <li> </li> </ol>
ordered list list
Given this, what would I put on my CSS to make the <p> red and the content between <span> blue <p>I'm a paragraph written in red font, but one of my words is <span>blue</span>!</p>
p = { color:red; } span = { color:blue; } Notice: there is a semicolon
Make your <p> tag 24px, green, and Garamond font
p { color:green; font-family:Garamond; font-size:24px; }
Incase the reader does not have Tahoma, also add Verdana and sans-serif
p { font-family: Tahoma, Verdana, sans-serif; }
You need to end each property-value with a ______. That's how CSS knows you're done with one pair and ready for the next.
semi-colon
Built in CSS fonts, to ensure the reader sees the font you want them to see. Remember: not all computers come with same fonts installed
serif: A font with little decorative bits on the ends of the strokes that make up letters. sans-serif: A plain-looking font, like this one. It doesn't have the little doohickies on the ends of letters like a serif font does. cursive: A scripty font! It looks like cursive writing.
There are ____ ________ _____, where <h1> is the boss and <h6> is puny!
six heading sizes
Tell the span selector that you want the font-family to be cursive.
span = { font-family:cursive }
Make your <span> tag have a yellow background
span { background-color:yellow; }
Let's change the size of the text. How? We use the _______ attribute. We make it equal to font-size, followed by a colon, the size you want, and end it with px (short for "pixels"). For example: <p style="font-size: 12px">
style
It's important to know that you can use the _______ _______ for paragraphs, headings, and even links!
style attribute
A _______ _______ is a file that describes how an HTML file should look. That's it!
style sheet
Things inside <>s are called _______. Tags also _______, so you should close them in the right order: the most recently opened tag should be the first one closed
tags nest
In CSS... Set your tds (table data cells) to have a height of 50px so we can see them better when we add our border. Give your tds a border of 1px dashed blue. Give your table a border of 1px solid black.
td { height:50px; border:1px dashed blue; } table { border: 1px solid black; }
Links have a lot of the same properties as regular text: you can change their font, color, size, and so on. But links also have a property, ______________, that you can change to give your links a little more custom flair. You're probably used to seeing links that are blue and underlined, right? Well, that's not the way it has to be!
text-decoration
A _______ is a possible setting for a property. color can be red, blue, black, or almost any color; font-family can be a whole bunch of different fonts; and so on.
value