Intro to HTML

HTML HTML = HyperText Markup Language Used to define the content of a webpage HTML is made up of tags and attributes Content

Tags Tags surround content Most tags appear in twos – an opening and a closing tag This is the content of the element Opening tag Closing tag Content

HTML tag Everything in here is part of the html document

Body tag Everything in here is part of the document body. This is what will be displayed in the browser.

Header tags This is the first header This is the second header … This is the sixth header

Paragraph tag This is the first header This is a paragraph

Table tag Here is a table tr = table row td = table data

Image tag Here is a picture This is Stanford 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 Content

Image tag revisited Here is a picture This is Stanford The src attribute provides additional information about the image element – the location of the image file to be displayed.

Links Here is a link Google The tag defines a link element. The href attribute specifies the link address.

Identifying attributes Content The id attribute specifies a unique ID for an element. It can be used with any element. Content 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! 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

CSS CSS = 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.

Internal Style Sheet Contained in tag in header section of HTML document Used for single webpage with unique style h1 {color:red;} #firstHeader {color:blue;}

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 Header