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
lists HTML recognizes 2 kinds of lists, ordered<ol> and unordered<ul> Ordered lists will number or letter each item Unordered lists will put dots in front of each item Each list item gets a <li> and </li>
Ordered lists Without a type attribute HTML will default to numbering the list <ol type=“1”> - list will be numbered (default) <ol type=“A”> - list will be labeled with capital letters <ol type=“a”> - list will be labeled with lowercase letters <ol type=“I”> - list will be numbered with uppercase roman numerals <ol type=“i”> - list will be numbered with lowercase roman numerals
Unordered lists Without a type attribute will default to a disc <ul style=“list-style-type:disc”> - will give a disc (default) <ul style=“list-style-type:circle”> - will give an empty circle <ul style=“list-style-type:square”> - will give a filled in square <ul style=“list-style-type:none”> - will give no mark
Nested lists Lists can be nested to provide “sublists” Unordered lists will cycle through mark types for each sublist
Day Four assignment Open Day 3 file, save as yournameHTMLday4.html Add at least one list to your webpage Bonus – have both an ordered list and an unordered list with not the default labels
comments Comments are not displayed on a webpage Everything in between <!-- and --> is considered a comment Useful for adding notes, temporarily hiding parts of a webpage <!-- this is a comment -->
Tables <table> defines a table in HTML <th> - denotes a table heading, defaulted to centered and bolded <tr> - denotes a row in the table <td> - denotes data cell
Tables <table> <tr> <th>Column #1 Heading</th> <td>column #1 data box</td> <td>column #2 data box</td> </table>
Day Five assignment Open Day 4 file, save as yournameHTMLday5.html Add at least one table to your webpage Bonus – add a border or center align your table
Links Links use the <a></a> tags The href attribute defines the destination <a href=“address”>link text on the page</a> <a href=“http://www.morganscience.com/mst”>Class Website</a>
Day six assignment Open Day 5 file, save as yournameHTMLday6.html Add a link on your webpage that links to a page on the internet Bonus – Have the link open as a new page
Images Images use the <img> tag, no closing tag needed src attribute indicates the source, or where the image file is located alt attribute tells the browser what to display if the image can’t be found
images <img src=“filename.jpg” alt=“text if image doesn’t load”> Image file needs to be in same folder as webpage file <img src=“bridgetypes.jpg” alt=“Bridge Types”>
Day seven assignment Open Day 6 file, save as yournameHTMLday7.html Add an image to your webpage Remember to paste a copy of the image into the Hand In folder Bonus – Make the image also act as a link