Programming for webpages HTML Programming for webpages
What is HTML? Hyper Text Markup Language is the language that computers use to understand websites It tells computers what things are and how to format them on a webpage.
Tags are specific terms placed between < and > How does HTML work? HTML uses “tags” to define elements, like tables, images, links, titles….. Tags are specific terms placed between < and > <title>
How do you use a tag? Usually tags are used at the beginning (opening) and the end (closing) of that piece of information General Format: <opening tag>content</closing tag> Example: <title>This is the Title</title> The closing tag for an element has a / between the < and the tag name </title>
What is an element? Elements are everything from opening tag to closing tag Title element - <title>This is the Title</title> Not all elements need a closing tag
Basic Structure of a Website Declaration Tells the computer to use HTML <!doctype html> Head Describes page, not shown Contains the title Body This is the actual information that is visible on the webpage
Lets make one now <!doctype html> <html> <head> <title>your name’s webpage</title> </head> <body>MST class first webpage This is the day one assignment </body> </html> Open Notepad Type this in:
How to save Click File, then Save As Find where you are going to save it For the file name use: yournameHTMLday1.html Change Save as Type to All Files Choose encoding as UTF-8
How to open Leave the notepad file open Go find where you saved it, it should have a google chrome icon Double Click the file
How to hand in Either copy/paste or Save as to get your file it into : AMST folder in the Hand-In folder on the network drive
Headings Headings indicate the important ideas on the page They are also what search engines look at Use tags <h1> to <h6>, with <h1> being the most important heading Different headings are displayed in different sizes, <h1> is the biggest
Formatting <p> defines a paragraph </p> Since there are different sized screens, this tells the internet browser to separate paragraphs <br> defines a line break, starts a new line (enter) Doesn’t have a closing tag <hr> defines a horizontal rule Puts in a horizontal line, used to separate content
Font formatting <b> - bold text <i> - italic text <mark> - highlighted text <sub> - subscripted text <sup> - superscripted text
nesting Tags can be placed between other tags (nested) <p><b>This is <mark>nested</mark> <i>text</i></b></p>
You try Open your day 1 file, save as yournameHTMLday2.html
Day two Assignment Create a page of your own you choose the topic Must contain a head element with a title Must contain an h1 heading and an h2 heading Must contain a Paragraph element Save it as: yournameHTMLday2.html
Attributes Attributes provide more information about elements. Attributes are placed in the opening tag General format: name=“value” <h2 title=“I’m an attribute”>heading #2</h2>
color Color is considered an attribute Text color Background color <p style=“color:red;”> Background color <body style=“background-color:yellow;”> <p style=“background-color:blue;”>
color Color can be identified a few different ways Name (140) RGB values HEX values HSL values RGBA values HSLA values
RGB color RGB is a combination of Red, Green, and Blue using a scale of 0-255 rgb(255,0,255) Mixer Equal numbers of all 3 give gray rgb(0,0,0) – black rgb(255,255,255) - white
HEx Hex is a six digit hexadecimal number based on the rgb values, 2 digits each #rrggbb #191970 = midnight blue Remember FF=255
HSL HSL stands for hue, saturation, and lightness hsl(hue,saturation%,lightness%) Hue is the color on a scale of 0-360 0 = red, 120 = green, 240 = blue Saturation is color intensity 0% = complete gray, 50% = kind of gray with color, 100% = full color Lightness 0% = black, 50% = color, 100% = white
RGBA & HSLA A stands for alpha, means opacity Ranges from 0 to 1 0 is fully transparent, 1 is not transparent at all
Examples <body style=“color:orange;”> <p style=“background-color:rgb(255,165,0);”> <h2 style=“color:#FFA500;”> <body style=“background-color:hsl(39,100%,50%);”>
Day Three Assignment Open Day 2 assignment, save as yournameHTMLday3.html Add a background color to your entire page Change color of some text to a different color Bonus – display your colors using either rgb, hex, or hsl