intro to html. html html = hypertext markup language used to define the content of a webpage html is...
TRANSCRIPT
Intro to HTML
HTML
HTML = HyperText Markup Language
Used to define the content of a webpage
HTML is made up of tags and attributes
<tag attribute=value>Content</tag>
Tags
Tags surround content
Most tags appear in twos – an opening and a closing tag
<tag>This is the content of the element</tag>
Opening tag
Closing tag
Content
HTML tag
<html>
Everything in here is part of the html document
</html>
Body tag
<html>
<body>
Everything in here is part of the document body. This
is what will be displayed in the browser.
</body>
</html>
Header tags
<html>
<body>
<h1>This is the first header</h1>
<h2>This is the second header</h2>
…
<h6>This is the sixth header</h6>
</body>
</html>
Paragraph tag
<html>
<body>
<h1>This is the first header</h1>
<p>This is a paragraph</p>
</body>
</html>
Table tag<html>
<body>
<h1>Here is a
table</h1>
<table>
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
</body>
</html>
tr = table rowtd = table data
Image tag
<html>
<body>
<h1>Here is a
picture</h1>
<img src=“stanford.jpg”>
<p>This is Stanford</p>
</body>
</html>
Note: The image tag doesn’t have a closing tag.
Attributes
Attributes provide additional information about an element
Attributes are defined in the start tag
<tag attribute=value>Content</tag>
Image tag revisited
<html>
<body>
<h1>Here is a
picture</h1>
<img src=“stanford.jpg”>
<p>This is Stanford</p>
</body>
</html>
The src attribute provides additional information about the image element – the location of the image file to be displayed.
Links
<html>
<body>
<h1>Here is a link</h1>
<a href=“www.google.com”>Google</a>
</body>
</html>
The <a> tag defines a link element. The href attribute specifies the link address.
Identifying attributes
<h1 id=“firstHeader”>Content</h1>
The id attribute specifies a unique ID for an element. It can be used with any element.
<h1 class=“first”>Content</h1>
The class attribute specifies that an element belongs to a particular class. It can be used with any element.
These identifying attributes will be very important for CSS…
Try it yourself!
<!DOCTYPE html>
Open up a new document in a text editor (Sublime, notepad, TextEdit)
Copy the following text to the first line of your document
Save the document as myFile.html
Double click to open myFile.html in a browser
Now you can make changes to the document and view the changes by saving then refreshing the open browser window
Intro to CSS
CSSCSS = Cascading Style Sheets
Used to define how to display HTML elements
HTML is the content, CSS is the style
CSS rules contain a selector and declarations. Each declaration contains a property and a value.
selector { property: value; property: value; }
declaration
Selectors
A CSS selector is an element, id, class
All HTML elements with the specified element type, id, or class will have the property values defined in the declarations
h1 { property: value; property: value; }
#firstHeader { property: value; property: value; }
.first { property: value; property: value; }
External Style Sheet
Separate CSS file linked at beginning of HTML document
Used to unify style across many web pages.
<html>
<head>
<link rel="stylesheet" type="text/css" href=”style.css">
</head>
<body>
</body>
</html>
Internal Style Sheet
Contained in <style> tag in header section of HTML document
Used for single webpage with unique style
<html>
<head>
<style>
h1 {color:red;}
#firstHeader {color:blue;}
</style>
</head>
<body>
</body>
</html>
Inline Style
Contained in start tag of HTML element
Used to define the style of an individual element
Use sparingly! In general, style should be separated from HTML content
<html>
<body>
<h1 style=“color:blue;”>Header</h1>
</body>
</html>