Coding with HTML {

THE BASICS { What is HTML and how can you use it to make websites?

 It’s how every website is made!  Everyone should know how to code—it can help you get a job!  You can use code that you make 100% or use websites like Google Sites or Weebly to create your own website!

 It’s how every website is made!  Everyone should know how to code—it can help you get a job!  You can use code that you make 100% or use websites like Google Sites or Weebly to create your own website!

 Websites are made up of a bunch of different pieces that you create with tags –,,,  HTML builds the website, CSS makes it look pretty

Divs Contain all of the text, pictures, ect. on the page Tables Arrange content in a grid Headers Large titles to tell you what sections are about Text Each paragraph should have its own tags Images Use an image’s URL or its location in your files Links Put a website’s URL in the quotation marks

CREATING A WEBPAGE { How do you turn a blank file into the beginning of a website?

Find your computer’s default text editing program (usually Notepad for Windows and TextEdit for Mac) and open a new file. Save your file by naming it whatever you want with.html at the end—this is how your computer knows it’s a webpage. Right-click the file and choose to open it in a browser. You’ll end up with a blank website in the browser window.

 Type “ ” at the top of your file. Underneath this, type “ ”  This way, your computer knows that everything between these tags is HTML, so it can now interpret it correctly. Add a few blank lines between the two tags for you to type in—don’t write anything outside these tags.

 Type and tags inside your html tags. This area of your code tells the browser information about your website that won’t actually show up on the main white area.  Add and tags and put whatever you want your website to be called in between them.  Save your file, and when you refresh your website in the browser, the tab at the top will have your website’s title on it!

 Underneath your tags, type and tags.  This is the main part of the webpage that will show up in the browser. Everything you code from now on will be in the middle of these tags.

 Add text inside your body tags, save your file, and see them appear in your web browser!  Continue adding whatever else you want to your website!

 If you want to incorporate CSS into your file, add and tags anywhere inside the tags.

USING TAGS { Putting together the basic components of your webpage

 Short for divider – they’re the invisible building blocks that decide where content is placed  You can put a div inside a div, and then another div inside that, ect. content here

 A grid that can have as many rows/columns as you like  Start with tags. Then, create as many rows as you like with. Create the columns inside these rows with. One Two Three Four OneTwo ThreeFour

 You can insert images from a website (first example) or by using the file path to where it is on your computer  You DO NOT need to end the tag. OR

 Headers make the text inside larger and bold. There are 6 you can use—h6 is the smallest.  You can use CSS to make your headers change appearance as well Title Text

 To link to a website, use tags.  The “href” part tells the computer where to point the link to Link Text

USING CSS { Making your website look extra fancy

 You can put CSS between and tags in your file’s  This is what CSS formatting looks like (more info in the next slide) div { height: 100%; width: 100%; }

div { height: 100%; width: 100%; } Style tags Name of what you’re applying the style to: This name can be a HTML tag (div, table) an ID (name you create yourself that starts with a hashtag, for example: #top) a class (name you create yourself that starts with a period, for example.top) Each individual thing’s style must be enclosed in curly braces

 You can name an object with an ID or class and refer to it in the style to change only that object  Classes are meant to be used for multiple objects that you want to look the same  IDs are meant to be used for one specific object that you want to change the look of … …

 For a quick and easy appearance change, just add the style right in the HTML tags  Add the word “style” to the tag and put your style inside quotation marks with each part separated by a semicolon …

Change the amount of space something takes up on a page With percentages: Decide what % the object takes up of the space it’s in Width: 100%; Height: 100%; With pixels: Decide how many pixels (tiny squares that make up the picture on your computer) the object takes up Width: 100px; Height: 250px;

This div has a width of 1000px, the same as the website, and a height of 250px This image of puppies has been stretched by leaving its width at 100% but changing its height to 50%

Push content away from the edges of a div or table so that it doesn’t touch the edge These are some words A div without padding A div with padding on the top and left

Just like height/width, you can use either percentages or pixels for padding  padding: 10px;  padding-left: 10px;  padding-right: 10px;  padding-top: 10px;  padding-bottom: 10px;  padding: 10%;  padding-left: 10%;  padding-right: 10%;  padding-top: 10%;  padding-bottom: 10%;

Push different objects away from each other so that they don’t touch Two divs without margin Two divs, one with a margin-bottom

Just like height/width, you can use either percentages or pixels for margins  margin: 10px;  margin-left: 10px;  margin-right: 10px;  margin-top: 10px;  margin-bottom: 10px;  margin: 10%;  margin-left: 10%;  margin-right: 10%;  margin-top: 10%;  margin-bottom: 10%;

Changes the color of text using either words (red) or hexadecimal codes (#00FFFF) Some red text Some purple text p { color: #C290D4; } … Some purple text

Changes the color of page elements using either words (red) or hexadecimal codes (#00FFFF). You can apply this to divs, tables, or the entire page. Change color of entire pagebody { background-color: #000000; } Change color of one element #header { background-color: #EE89EF; }

The text on your webpage has several different attributes that you can change Style AttributeCode Sizefont-size: 10px; Family (Georgia, Verdana, ect.)font-family: tahoma; Boldfont-weight: bold; Text Italicfont-style: italic; Text Underlinedtext-decoration: underline; Text

Borders can be placed either all around an object or on specific sides border: 1px solid #000000; Border styles must include the thickness in pixels, the style of the line (solid, dashed, dotted), and the color of the line border-right: 1px solid #000000; border-left: 1px dotted #000000; border-top: 1px dashed #000000; border-bottom: 1px dashed #000000;

Congratulati ons! { < you now understand the basic principles of HTML and CSS! />