Please download the course slides, and install Sublime Text. Link and slides available here: www.andreajessup.com
Wifi Name: Improving Guest
NO PASSWORD :)
Bathroom Code: 5600*
You're going to learn HTML, the basic language used to create websites, and CSS, the tool we use to control the appearance of our sites. You'll create two websites:
The first, created in the first 2 classes, will allow you to learn the basics of HTML and CSS through example code you write yourself.
The second website will allow you to apply what you've learned in the first 2 classes, plus some more advanced concepts, to create a basic website for your own content.
Let's make sure we're all using the same language and definitions as we talk about the web, our tools, and what we're doing here.
A computer application (Firefox, Chrome, Internet Explorer, etc.) that can interpret certain file types. In the same way that Microsoft Word can display .docx files, browsers can handle .html (and other) files. Like Word, the browser does not display the code that is included in those files. Instead it interprets that code and displays it as a website, with images, colors, words, and structure.
The internet allows multiple people to access the same content regardless of location (mostly). Your computer, the client, is connected to the internet, which allows you to access a collection of files (a website) that are stored on someone else's computer (a server) which is also connected to the internet.
Since a website is a collection of files, the first step in making our website is to create the file structure.
All the files for your site should be stored within the same folder:
Note: File names should not include spaces or special characters. File names ARE case sensitive.
A website is made up of three components: your Content, the Structure, and the Presentation.
The actual information you want on your site is the Content
Putting that content into an HTML <p> element because it is a paragraph is Structure
Making the font of that paragraph blue and 18pt is Presentation
In today's class, we'll focus on HTML - the structure of your site
HTML was originally created to provide both structure AND presentation to scientific/academic papers. Modern websites are more than academic papers, and HTML is no longer sufficient for the presentation of our sites. Hence the second part of this course, CSS.
<tagname>Stuff in the middle</tagname> <p> This is a sample paragraph.</p>
An element that can contain other elements or content
A paragraph (<p>) contains text
An element that cannot contain anything else
All elements "nest" inside one another - you put elements inside of container elements, inside of container elements…
Whichever element opens FIRST closes LAST.
<p> <ul> <li> <i> This is some content! </i> </li> <li> <i> This is some content! </i> </li> </ul> </p>
The first thing on an HTML page is the doctype, which tells the browser that the document is of type HTML. This is a standalone element.
* The doctype is case-insensitive. DOCtype, doctype, and DoCtYpe are all valid. We follow the convention of "DOCTYPE" for the benefit of other humans, not the browser.
After <!DOCTYPE html>, we always put <html> tags to tell the browser that anything inside these tags is to be treated as HTML.
<!DOCTYPE html> <html> </html>
Inside the <html> tags, we place <head> and <body> tags to separate out information about our page from the actual page contents.
Each html file has exactly 1 head element and 1 body element.
Head: The head contains the title of the page & meta information about the page. Meta information is not visible to the user, but has many purposes, one of which is to tell search engines about your page, who created it, and a description.
Body: The body contains the actual content of the page. This is what is displayed to the user when they visit your site.
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
When you look at the top of a tab in your browser, you can see some text telling you what site you are on. This is the page title.
The <title> tag must be nested inside of the <head> tags.
<!DOCTYPE html> <html> <head> <title>My Page Title</title> </head> <body> </body> </html>
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
* Heading number indicates hierarchy, not size. Think outlines from high school papers
<!-- Ex. 1: --> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p>
<!-- Ex. 2: --> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p>
<!-- Ex. 3: --> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p>
All 3 examples produce the same output. White space is only for humans!
Paragraphs allow you to format your content in a readable fashion.
* You can edit how paragraphs are displayed with CSS
<p> Here is a paragraph with <em>Emphasized</em> text. </p> <p> Here is a paragraph <strong>Important</strong> text. </p>
Here is a paragraph with Emphasized text.
Here is a paragraph with Important text.
<em> and <strong> are meant to indicate meaning through code. If you want to have italicized text just for style/appearance, you should use CSS.
<p> Imagine there's no Heaven <br/> It's easy if you try <br/> No hell below us <br/> Above us only sky </p>
Imagine there's no Heaven
It's easy if you try
No hell below us
Above us only sky
Some elements are more complex, and require more than one set of tags to be complete. Elements such as lists and tables are actually made up of a collection of nested elements.
<p>Unordered list (bullets)</p> <ul> <li>List Item</li> <li>Another List Item</li> </ul>
<p>Ordered list (sequence)</p> <ol> <li>List Item</li> <li>Another List Item</li> </ol>
Unordered list (bullets)
Ordered list (sequence)
Lists can be used to organize any list of items, including menus of links.
You'd be surprised how often lists are used in web design.
Tables are a way to represent complex information in a grid format.
Tables are made up of rows and columns.
<table> <tr> <th>Left Head Cell</th> <th>Right Head Cell</th> </tr> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table>
|Left Head Cell||Right Head Cell|
|Row 1, Cell 1||Row 1, Cell 2|
|Row 2, Cell 1||Row 2, Cell 2|
Tables can be styled with CSS to add zebra striping or to highlight important rows/columns.