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
Similar presentations
