Download presentation
Presentation is loading. Please wait.
1
Programming for webpages
HTML Programming for webpages
2
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.
3
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>
4
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>
5
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
6
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
7
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:
8
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
9
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
10
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
12
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
13
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
14
Font formatting <b> - bold text <i> - italic text
<mark> - highlighted text <sub> - subscripted text <sup> - superscripted text
15
nesting Tags can be placed between other tags (nested)
<p><b>This is <mark>nested</mark> <i>text</i></b></p>
16
You try Open your day 1 file, save as yournameHTMLday2.html
17
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
19
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>
20
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;”>
21
color Color can be identified a few different ways Name (140)
RGB values HEX values HSL values RGBA values HSLA values
22
RGB color RGB is a combination of Red, Green, and Blue using a scale of rgb(255,0,255) Mixer Equal numbers of all 3 give gray rgb(0,0,0) – black rgb(255,255,255) - white
23
HEx Hex is a six digit hexadecimal number based on the rgb values, 2 digits each #rrggbb # = midnight blue Remember FF=255
24
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
25
RGBA & HSLA A stands for alpha, means opacity Ranges from 0 to 1
0 is fully transparent, 1 is not transparent at all
26
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%);”>
27
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
29
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>
30
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
31
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
32
Nested lists Lists can be nested to provide “sublists”
Unordered lists will cycle through mark types for each sublist
33
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
35
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 -->
36
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
37
Tables <table> <tr> <th>Column #1 Heading</th>
<td>column #1 data box</td> <td>column #2 data box</td> </table>
38
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
40
Links Links use the <a></a> tags
The href attribute defines the destination <a href=“address”>link text on the page</a> <a href=“ Website</a>
41
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
43
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
44
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”>
45
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
Similar presentations
