Error
Errors:
HTML Documentation
HTML Basics
HTML File Skeleton
<!DOCTYPE html> <html> <head> <title>Your Page Title</title> </head> <body> <!--Inside the body tag is where you put all the cool stuff you want on your page!--> </body> </html>
The html tag tells the browser that this is an html document.
The head element is a container for all the head elements, which can include a title for a document, scripts, styles, and more. The title tag defines the title of the page.
The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, and lists.
Tags
A basic HTML element starts like this: <tag> It starts with an opening tag and ends with a closing tag. The closing tag has the same name as the opening tag, but with a / Everything inside should be indented one level. </tag>
HTML Attributes
The general format for adding an attribute and a value for the attribute is:
<tag attribute="value">Tag content here</tag>
<img src="https://codehs.com/static/img/logo.png" height="50px">
Header Tags
<h1>Level 1 Header</h1> <h2>Level 2 Header</h2> <h3>Level 3 Header</h3>
Level 1 Header
Level 2 Header
Level 3 Header
Basic Tags
The <i> tag displays text in italics.
The <b> tag displays text in bold.
<p> This is a paragraph where <i>this will display in italics</i> and <b>this will display in bold</b>. </p>
This is a paragraph where this will display in italics and this will display in bold.
Semantic Tags
- <header>
- <nav>
- <main>
- <article>
- <section>
- <aside>
- <footer>
The <strong> tag defines strongly important text.
The <em> tag emphasizes text.
The <mark> tag highlights text.
<p> This is text that is <strong>important</strong>. <br> This is text that needs <em>emphasized</em>. <br> This is text that needs <mark>highlighted</mark>. </p>
This is text that is important.
This is text that needs emphasized.
This is text that needs highlighted.
Horizontal Lines
<p> This is a section about a certain theme. </p> <hr> <p> This is a section about another theme separated from the previous section by a horizontal line that implies a thematic break in content. </p>
This is a section about a certain theme.
This is a section about another theme separated from the previous section by a horizontal line that implies a thematic break in content.
Single Line Break
<p> This is a section about a certain theme. </p> <br> <p> This is another section that starts on a new line. </p>
This is a section about a certain theme.
This is another section that starts on a new line.
Links
<a href = "https://google.com">Google</a>
Images
The src attribute indicates where the image is coming from and can be either a directory path to a photo saved on your computer or the url of an image on the internet like the example below. You can also upload your own photos to CodeHS to use in your program. See instructions for how to do that here!
The alt attribute specifies alternate text that will display if the image cannot be loaded.
The width and height attributes specify the width and height of the image.
<img src = "https://codehs.com/static/img/logo.png" alt="Image not found" width="50px" height="50px">
Lists
The <ol> tag defines an ordered list (numbered list)
The <li> tag defines a single list item inside of a list
<ol> <li>Item one</li> <li>Item two</li> <li>Item three</li> </ol> <ul> <li>Item A</li> <li> Item B <ol> <li>Subitem 1</li> <li>Subitem 2</li> </ol> </li> <li>Item C</li> </ul>
- Item one
- Item two
- Item three
- Item A
-
Item B
- Subitem 1
- Subitem 2
- Item C
Tables
The <thead> tag groups together the header information in the table.
The <tbody> tag groups together the body information in the table. The <tr> tag defines a single row in the table. The tr element can contain several cells of information.
The <th> tag defines a table header. th tags are commonly used in the first row of the table to show the headers of each column.
The <td> tag defines a table data element, a single cell of information. td elements go inside of a table row.
The border attribute defines how thick the table border is (default is no border)
<table border="1"> <thead> <tr> <th>Name</th> <th>Favorite Color</th> </tr> </thead> <tbody> <tr> <td>Sam</td> <td>Purple</td> </tr> <tr> <td>Taylor</td> <td>Orange</td> </tr> </tbody> </table>
Name | Favorite Color |
---|---|
Sam | Purple |
Taylor | Orange |
Comments
Using comments in your code can help you maintain clean, clear, and understandable code.
<!-- Your comment goes here. --> <!-- This section of the webpage links to other parts of the site --> <a href="about.html">About</a> <a href="home.html">Home</a>
Embedding iframes
The src attribute indicates where the HTML page is coming from and is the url of an HTML page on the internet like the example below.
The width and height attributes specify the width and height of the iframe window.
<iframe src = "https://codehs.com" width="400px" height="400px"></iframe>
CSS Basics
Inline Styling
The format for the style attribute is:
<tagname style="property: value;">You can add multiple styles to one element:
style="property1: value1; property2: value2;"
<h3 style="background-color:LightBlue;">My Journal</h3> <p style="background-color:LightYellow; font-size:15px;">Today I walked my puppy at the park and made my own website.</p>
My Journal
Today I walked my puppy at the park and made my own website.
For a full list of properties and values that can be used, go to CSS Properties
Adding CSS to HTML Page
The CSS code goes inside the <style> tag which goes in the <head> element.
The style is separate from the content of the page. Because it is metadata about the content, it belongs in the head.
<head> <title>Your Page Title</title> <style> /* * This will select all h1 elements * and give them a font size of 30px * and a color of red. */ h1 { font-size: 30px; color: red; } </style> </head> <body> <h1>CodeHS</h1> </body>
CodeHS
Adding External CSS
The external CSS file should be added to the page using a <link> tag in the <head> of the HTML page.
<html> <head> <title>Your Page Title</title> <link rel="stylesheet" type="text/css" href="my_style.css"> </head> <body> <h1>CodeHS</h1> </body> </html>my_style.css
/* * This will select all h1 elements * and give them a font size of 30px * and a color of red. */ h1 { font-size: 30px; color: red; }
CodeHS
CSS Syntax
/* General format */ selector { property: value; property: value; } /* * In this CSS rule, h1 is the selector, and each line * inside the braces is a CSS declaration. * * This rule will select all h1 elements, set their font-size * property to be 60px, and set their color property to be red. */ h1 { font-size: 60px; color: red; }For a full list of properties and values that can be used, go to CSS Properties
CSS Comments
A CSS comment starts with /* and ends with */
h1 { /* This is a single line comment */ color: red; } /* * This is a multi-line comment that * spans multiple lines */ h2 { color: green; }
Selecting By Tag
/* * This CSS rule will select all images * and their height will be set to 200 pixels */ img { height: 200px; }
Selecting by Class
The class style overrides tag style in case of a conflict. In other words, if a select-by-tag rule says that the element should be red, and a select-by-class rule says the same element should be green, the class rule takes precedence and the element will be green.
You can add a class to a tag like this:
<tag class="class-name"></tag>
You can add multiple classes to a tag by separating class names with spaces:
<tag class="class1 class2 class3"></tag>
Class names
- Cannot start with a number
- Should be all lowercase
- Should use dashes (-) between words i.e. "class-name"
- Should be descriptive
.class-name
<head> <title>Your Page Title</title> <style> /* * This rule will apply to all the elements with * the "alert" class */ .alert { color: red; } /* * This rule will apply to only <h1> elements * with the class "alert" */ h1.alert { font-size: 20px; } /* * This rule will apply to all elements with the * "morning-greeting" class */ .morning-greeting { background-color: LightYellow; } </style> </head> <body> <h1 class="alert morning-greeting">Good Morning!</h1> <p class="alert">Hi!</p> </body>
Good Morning!
Hi!
Selecting by ID
An element can only have one id and the id of an element should be unique.
There should be only one tag with a given id on any web page.
Using the ID as a selector will select the one element that has that ID.
The id style overrides both tag and class style in case of a conflict. In other words, if a select-by-tag rule says that the element should be red, and a select-by-class rule says the same element should be green, and a select-by-id rule says that the same element should be yellow, the id rule takes precedence and the element will be yellow.
You can add an id to a tag like this:
<tag id="id-name"></tag>
id names:
- Cannot start with a number
- Should be all lowercase
- Should use dashes between words i.e. "id-name"
- Should be descriptive
#id-name
<head> <title>Your Page Title</title> <style> /* * This rule will apply to the single element * with the id "logo" */ #logo { font-size: 20px; color: red; } </style> </head> <body> <h1 id="logo">CodeHS</h1> </body>
CodeHS
Divs
Grouping elements together in a div allows us to style that block as one unit.
<div id="block-one"> <h3>Welcome</h3> <p>Welcome to my web page.</p> </div> <div id="block-two"> <ul> <li>Home</li> <li>About</li> </ul> </div>
#block-one { color: red; } #block-two { color: blue; }
Welcome
Welcome to my web page.
- Home
- About
Spans
<p>This is a <span class="big">paragraph</span> of <span class="small">text</span></p>
.big { font-size: 20px; } .small { font-size: 8px; }
This is a paragraph of text
CSS Properties
Color
- A valid color name, such as "Blue" or "DarkGreen"
- An RGB value, such as "rgb(255, 0, 0)"
- A HEX color code, such as "#68ff00"
Color Names
Common color names:- red
- orange
- yellow
- green
- blue
- cyan
- indigo
- black
- white
There are 140 valid color names. See a full list of all names here
p { color: blue; }
Hello
RGB Colors
Every color can be made just by mixing different amounts of red, green, and blue.
RGB color values can be specified in CSS using "rgb(red, green, blue)"
- Each value can be between 0 and 255, inclusive.
- rgb(255, 0, 0) would be red
- rgb(255, 255, 255) would be white
- rgb(0, 0, 0) would be black
p { color: rgb(255, 0, 0); }
Hello
Hex Color Values
- The first two hexadecimal digits specify the amount of RED in the color
- The next two hexadecimal digits specify the amount of GREEN in the color
- The last two hexadecimal digits specify the amount of BLUE in the color
- Each digit can be a value from 0 to F, with 0 being the least and F being the most
- "#ff0000" would be red
- "#ffffff" would be white
- "#000000" would be black
p { color: #0000ff; }
Hello
Color Picker
Text and Font
font-size: size of the font (e.g. 30px)
font-family: font family (e.g. Arial or Times)
font-style: font style (e.g. italic or normal)
font-weight: how thick the font is (bold or bolder, or a value from 100 to 900)
text-align: sets the horizontal alignment of text (center, left, right)
<head> <title>Your Page Title</title> <style> h1 { font-size: 100px; font-weight: bold; color: blue; text-align: center; } </style> </head> <body> <h1>Welcome to my blog!</h1> </body>For a full list of possible CSS properties and values, visit W3 Schools
Background
background-image: specifies one or more background images
background-repeat: sets how many times the background image will be repeated
<head> <title>Your Page Title</title> <style> body { background-image: url("sandpaper.gif"); } </style> </head> <body> <h1>Welcome to my blog!</h1> </body>For a full list of possible CSS properties and values, visit W3 Schools
Border
border-color: sets border color for all four border sides
border-width: sets the width of the border for all four border sides
border-style: sets the style of the border for all four border sides (solid, dotted, dashed, double)
border-size: sets the size of the border for all four border sides
border-right-color: sets border color for right border
border-right-width: sets the width of the border for right border
border-right-style: sets the style of the border for right border (solid, dotted, dashed, double)
border-right-size: sets the size of the border for right border
border-left-color: sets border color for left border
border-left-width: sets the width of the border for left border
border-left-style: sets the style of the border for left border (solid, dotted, dashed, double)
border-left-size: sets the size of the border for left border
border-top-color: sets border color for top border
border-top-width: sets the width of the border for top border
border-top-style: sets the style of the border for top border (solid, dotted, dashed, double)
border-top-size: sets the size of the border for top border
border-bottom-color: sets border color for bottom border
border-bottom-width: sets the width of the border for bottom border
border-bottom-style: sets the style of the border for bottom border (solid, dotted, dashed, double)
border-bottom-size: sets the size of the border for bottom border
<head> <title>Your Page Title</title> <style> h1 { border-color: green; border-width: 2px; border-style: dashed; } </style> </head> <body> <h1>I love using CodeHS!</h1> </body>For a full list of possible CSS properties and values, visit W3 Schools
Margin
Setting the margin to auto centers the element within its container.
margin: shorthand to set the margin of top, right, bottom, and left (in that order)
margin-top: sets the margin for the top of the container
margin-right: sets the margin for the right of the container
margin-bottom: sets the margin for the bottom of the container
margin-left: sets the margin for the left of the container
<head> <title>Your Page Title</title> <style> h1 { margin: auto; } p { margin: 10px 20px 10px 20px; } </style> </head> <body> <h1>Welcome to my blog!</h1> <p>Here I will write about my life and adventures.</p> </body>For a full list of possible CSS properties and values, visit W3 Schools
Padding
Unlike margin, it cannot be set to auto.
padding: shorthand to set the padding of top, right, bottom, and left (in that order)
padding-top: sets the padding for the top of the container
padding-right: sets the padding for the right of the container
padding-bottom: sets the padding for the bottom of the container
padding-left: sets the padding for the left of the container
<head> <title>Your Page Title</title> <style> h1 { margin: auto; padding-top: 15px; padding-bottom: 15 px; } p { margin: 10px 20px 10px 20px; } </style> </head> <body> <h1>Welcome to my blog!</h1> <p>Here I will write about my life and adventures.</p> </body>For a full list of possible CSS properties and values, visit W3 Schools
Transform
transform: skew(x, y) skews an element along the x-axis, y-axis, or both
transform: scale(x, y) scales an element along the x-axis, y-axis, or both
transform: rotate(angle in degrees) rotates an element based on an angle parameter
transform: translate(x, y) translates or repositions an element along the x-axis, y-axis, or both
<head> <title>Your Page Title</title> <style> div { width: 100px; height: 100px; padding: 32px; background-color: blue; } .skew { transform: skew(10deg, 25deg); } .rotate { transform: rotate(90deg); } .scale { transform: scale(2, 1); } .translate { transform: translate(30px, 40px); } </style> </head> <body> <div class="skew"></div> <div class="rotate"></div> <div class="scale"></div> <div class="translate"></div> </body>For a full list of possible CSS properties and values, visit W3 Schools
Bootstrap
Bootstrap Basics
Adding Bootstrap
Here is the starting template for a Bootstrap page:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <!-- Bootstrap Icons CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"> <!-- Bootstrap JavaScript --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </head> <body> <!-- Your HTML code here --> </body> </html>
More Bootstrap
Slides and Notes
No slides available for this video
Collaborate on this sandbox program!
Admin Only. Not visible to customers
A collaborative program is a program you can work on with a partner or group of people. The program shows up in all of your sandbox pages, and when any of you save code, it will save it for each person.
Embed Your Code On an HTML Page
Want to use your CodeHS code outside of CodeHS? Use this embed code to get started.
How to Use
Version 1: On Your Computer
- Create a file called
codehs.html
on your desktop - Put the html below into the codehs.html file and save it
- Now double click the file to open it in a web browser
Version 2: Online
- Create a file called
codehs.html
on your desktop - Put the html below into the codehs.html file and save it
- Upload this file to the internet
- Visit your web page
Note this only works on single files currently.
About
HTML