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*
Tell us about yourself.
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'RE GOING TO MAKE A WEBSITE!!
(Actually, you'll make two websites.)
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 website is actually a file or collection of files. Browsers open the file and interpret the contents, then display them to the user as intended by the developer. (Pretty much). The contents of the file can instruct the browser to display text, colors, images, links, and more. The file can also include instructions about how the site should behave, though that is covered in a later course.
A browser (Firefox, Chrome, Internet Explorer, Opera, Netscape, etc.) is a computer application that displays certain file types, usually for websites. In the same way that Microsoft Word can display .doc, .docx, .txt, and other types of files, browsers can handle .html, .jsp, .php, and many other file types. And like Word, the browser does not display the code that is included in those files. Instead it interprets that code and displays it as website, with images, colors, words, and structure.
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 server (also connected to the internet).
If a website is a collection of files, then the first step in making our website is to create our files/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.
A website is a way to present your content to the world, using HTML and CSS to structure that content & make it look good.
In today's class, we'll focus on HTML - the structure of your site
The actual information you want on your site is the Content
Putting your content into an HTML p element because it is a paragraph is Structure
Making the font of your paragraph blue and 18pt is Presentation
Today we will be learning how to code a site in HTML using paragraphs, headings, links, images, and lists.
If you 'view the source', you see this
<tagname>Stuff in the middle</tagname> <p> This is a sample paragraph.</p>
All elements "nest" inside one another
Nesting is what happens when you put other containing tags inside other containing tags.
Whichever element OPENS first CLOSES last
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 ﬁrst thing on an HTML page is the doctype, which tells the browser which version of the markup language the page is using.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// www.w3.org/TR/html4/loose.dtd">
* The doctype is case-insensitive.
DOCtype, doctype, DocType and DoCtYpe are all valid.
After <!doctype>, the page content must be contained between <html> tags.
<!DOCTYPE html> <html> </html>
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.
Each html file has exactly 1 head element and 1 body element.
<!DOCTYPE html> <html> <head> Information about the page here. </head> <body> The page content here. </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.
This will be our first time adding content to the inside of a tag:
<head> <title>My Page Title</title> </head>
<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.
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>Data Cell 1</td> <td>Data Cell 2</td> </tr> <tr> <td>Data Cell 3</td> <td>Data Cell 4</td> </tr> </table>
|Left Head Cell||Right Head Cell|
|Data Cell 1||Data Cell 2|
|Data Cell 3||Data Cell 4|
Tables can be styled with CSS to add zebra striping or to highlight important rows/columns.
<div id="copyright">© GDI 2013</div> <img src="my_picture.jpg" /> <a href="http://girldevelopit.com">GDI</a>
Links have three components
<a href="http://www.girldevelopit.com" title="GDI Homepage">GDI</a>
The <a> tag surrounds text or images to turn them into links
Links can have attributes that tell the link to do different actions like open in a new tab, or launch your e-mail program.
<a href="home.html" target="_blank">Link Text</a>
Link opens in a new window/tab with target="_blank"
<a href="mailto:email@example.com">E-mail us!</a>
Link opens mail program by inserting mailto: directly before the email address.
Images have three components
alt="Girl Develop It Logo"/>
* Notice: This tag is our first example of a stand-alone or "self-closing" element.
Relative Path Example:
Can you find the Apple Store?
Absolute Path Example:
Can you find the Apple Store?
Relative paths are just instructions to the browser so it can navigate the file structure of your website.
Absolute paths refer to a specific location of a file, including the domain.
file:///Users/andreajessup/Sites/GirlDevelopIt_IntroHTML/GDI_IntrolHTML_Redo/class1.html#/50But this won't work if you try to open your site on a different computer.
You can add comments to your code that will not be seen by the browser, but only visible when viewing the code.
<!-- Comment goes here -->
Comments can be used to organize your code into sections so you (or someone else) can easily understand your code. It can also be used to 'comment out' large chunks of code to hide it from the browser.
<!-- Beginning of header --> <div id="header">Header Content </div> <!-- End of header --> <!-- <ol> <li>List Item</li> <li>Another List Item</li> </ol> -->
There are character codes for many different characters in many different languages
Add a copyright statement (with the proper symbol) to the bottom of your site
Add a comment somewhere in the site that tells you what style you'd like to add to that element next week. For example:
<!-- Make this h1 content red and underlined --> <h1>This is a header!</h1>