Source: Homes.com
HTML is a markup language that is made up of tags and text. It can be used to create websites! In this example, we will look at the tags and formatting you need to create your first simple website. In class, we talked about how HTML can be thought of as a set of boxes around text that are divided into two main sections: the head and the body. When making your first website, don't be afraid to play around with these tools to see what you can create! This reference sheet was created with only the tools we have learned so far.
In your website's head, you define the title of the website. This is the name that appears at the top of your browser when you open it. A good title tells the reader what they should expect to see on your website. We use the <title> tag to define the title. Here is an example:
<title>My First Website!</title>
The body is where you create the majority of your website's content. We use headings and paragraphs to organize the information on our website.
There are 6 different types of headings, each a different size. They are meant to be used in a hierarchy to tell the reader what section and subsection they are in. For example, this paragraph is under the heading "Headings" which is size 3. We are in a subsection under both "The Body" and "Introduction to HTML" which have larger headings. Here are examples of how to create headings of each size:
<h1>This is the Largest Heading</h1>
<h2>This is the Second Largest Heading</h2>
<h3>This Heading is Reasonably Large</h3>
<h4>This Heading is Smaller</h4>
<h5>This is Almost the Smallest Heading</h5>
<h6>This is the Smallest Heading</h6>
We use paragraph tags to define bodies of text that are going to be on our website. It is good practice to use headers above any paragraph that changes topic. Here is an example:
<p>This is a paragraph of text...</p>
One more thing we can do with our websites is add breaks within or between headings and paragraphs. The two that we are going to use are the line break and horizontal line tags. These tags are unique because they do not need to be closed, unlike all the tags discussed previously.
Line breaks are used to move the next piece of text onto the next line. They are very useful for breaking up information in a paragraph by splitting it into two sections or putting text on multiple lines. Here is an example:
<p>This some text on line 1</p>
<br/>
<p>This some text on line 2</p>
Horizontal lines are similar to line breaks, but instead of putting the next text on a new line, it adds an actual horizontal line between your text to separate it. Here is an example:
<p>This some text above the horizontal line</p>
<hr/>
<p>This some text below the horizontal line</p>
We can emphasize the text on our website by making it appear bold and in italics. These styles can be used to draw attention to specific words and phrases that are important to your main idea. Here are examples:
<strong>This phrase is in bold</strong>
<em>This phrase is in italics</em>
When making our websites, it's important that we cite where we got our information from. When it comes from another website, it's easy to link directly to the website you read!
We can add links directly to our paragraphs that are disguised as normal text. This is helpful to the reader because some links can be really long and ugly! To add a link to a line, we need to use this tag:
<a href="www.link-to-website.com">Text on Website</a>
The link in quotes is the webpage that the link will direct the reader to and the text is what will be clickable within the paragraph.
When you find a website that has information you use on your website, it's important to credit the original author by citing their work. On our websites, we will include a link to the website or original work and the author's name. For example:
According to the HTML Reference Sheet by Mr. Rua, headings should go above paragraphs to organize your website.
What is a website without images? We can use different photos, art pieces, and animations to spice up our website and make it more interesting to look at. When including an image, there are 4 factors you need to include / consider in the tags:
src: The image source is the name of the image in your file system. To be included properly, it must be in the same folder as your HTML document file!
alt: When your website has difficulty loading (due to internet connection issues or something else), this text will appear in place of your image telling the reader what is supposed to be there.
width: This is the width of your image in pixels.
height: This is the height of your image in pixels.
<img src="image.jpg" alt="Description" width=500 height=500/>
Source: Homes.com
Note that if you set both a width and height, the image will be stretched to meet those requirements. Consider starting with just one. Make sure you cite your images with the author / source and a link to where you found it!
CSS stands for "Cascading Style Sheets" and is used to apply different styles to the layout and text on your websites. This includes color, font, and weight which can all be used to make your website more readable and interesting to look at. A CSS document is made up of sections (known as selectors) corresponding to the parts of the website. For this introduction, we are focusing on 5: Background color, paragraph style, link style, heading style, and horizontal line style. Added: Lists.
An HTML contains all of the information that is going to be on your website: text, links, images, etc. A CSS document is a separate file that is used to define a style for an entire webpage. We keep them separate so it's easier to make large style changes quickly. For example, in my CSS document, I can change the font size of my entire website by changing only one number.
We can have our HTML document use the style created in a CSS document by linking the two together with a new tag called link. There are two pieces to it, the relation and the reference. The relation for us is always going to be "stylesheet" when we are linking a CSS document. This is how we tell our website that we are linking a style that it will use. The reference tells our document what file in our system is the stylesheet it is going to be connected to. Here is an example:
<link rel="stylesheet" href="style.css">
In computing, we use different number systems to count like binary and hexadecimal. When we represent colors, we do so with hex codes. These are 6-digit numbers that tell the computer how much red, green, and blue make up a color so it can be represented on screen. If you are interested in learning more, read through the articles linked here.
For the purposes of this reference sheet and assignment, we will be using the color picker in web lab. To use it, type #000000 and click on the number. A purple lighting bolt should appear. When you click on the lightning bolt, a menu will be displayed that lets you choose what color you want to represent. Play around with it and be creative with your colors!
We know that the body of our website is where we put everything that the reader is going to see. This includes the headings, paragraphs, images, and more. In our CSS document, we are going to define the background color in the body selector. Within this section, we use the background property and set it equal to a hexidecimal color value. Here is an example:
body {
background: #FFFFFF;
}
Paragraphs contain a lot of text and have four properties that we are going to be editing. We are also going to be editing the same properties for links. Here are those properties:
color: Uses hexidecimal to set the color of text in paragraphs.
font-weight: Can be used to make text bold or light.
font-size: Sets the size of the font (same as Google Docs).
font-family: Sets the font of the text (try experimenting).
Here are examples of how to style a paragraph and link (use p as the selector for paragraph styling and a as the selector for links):
p {
color: #000000;
font-weight: normal;
font-size: 16;
font-family: serif;
}
a {
color: #0000FF;
font-weight: normal;
font-size: 16;
font-family: serif;
}
Styling headings is very similar to paragraphs and links, except we aren't going to be setting the font size becuase they're all different. In our template, the headings are grouped together and share properties, but they don't have to and can be separated if you want to style them differently (including changing their default sizes). Here is an example:
h1, h2, h3, h4, h5, h6 {
color: #000000;
font-weight: bold;
font-family: serif;
}
We can use the hr selector to make style changes to horizontal lines. We do this because, typically, they should match or compliment the color of paragraph text. Here is an example:
hr {
color: #000000;
}
Sometimes, when presenting information on a website, we need to put things into lists. These are great for separating a collection of ideas like a set of steps to be followed or a shopping list. The two types of lists we are going to work with are ordered and unordered.
Items in an ordered list are preceeded by numbers. This type of list is best when the items within it need to be presented or followed in a set sequence (otherwise known as: in order). To make an ordered list:
Here is an example:
<ol>
<li>Step 1 of list</li>
<li>Step 2 of list</li>
<li>Step 3 of list</li>
</ol>
Items in an ordered list are preceeded by bullet points. This type of list is best when the order of the items within it does not matter. An unordered list is different from an ordered list because:
Here is an example:
<ul>
<li>Item 1 of list</li>
<li>Item 2 of list</li>
<li>Item 3 of list</li>
</ul>
We can style ordered and unordered lists by using the ol and ul selectors. Here is an example:
ol, ul {
color: #000000;
font-weight: normal;
font-size: 16;
font-family: serif;
}
Tables are a great way to organize data on your website that can't be easily represented in a list or simple paragraph. They are also one of the more challenging structures to implement becuase we need to consider multiple dimensions of the table when including it in our website. Tables are made up of cells that are organnized in rows. These cells are the boxes / rectangles in a table that hold information. There are several tags explained below that are all necessary for creating a good table.
| Tag | Description | Styling |
|---|---|---|
| <table> | This tag surrounds all of the other syntax that is used to make up a table. It tells your document, "Hey! This is a table!" | We use the table selector to style a table. This selector will allow us to modify the text style within the table and the outside border, but not the interior borders. |
| <tr> | The <tr> tag surrounds all of the items in a single row of a table. It stands for "table row" and they hold table headings and data tags (see below). | We use the tr selector to style a table row. Because we can already style the text with the table selector, we can include this selector when styling a table becuase it allows us to modify the borders of each row in a table. |
| <th> | The <th> tag stands for "table header" and is meant to be used for only the first row of a table. We do this so we can have style differences between the table headers. For example, table headers are bold by default. | We style table headers with the th selector. We can make changes to the top of the table by separating this selector from the others when we style our table |
| <td> | The <td> stands for "table data" and us used within rows to represent table cells, or the information in each column of the row. When we implement table data, we have to put it in order from left to right when writing our HTML document otherwise the table will be out of order. | We use the td selector to style table cells (data). Because we can already style the text with the table selector, we can include this selector when styling a table becuase it allows us to modify the borders of each cell in a table. |
Here is an example of how to use a table in HTML:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data: Row 1, Col 1</td>
<td>Data: Row 1, Col 2</td>
<td>Data: Row 1, Col 3</td>
</tr>
<tr>
<td>Data: Row 2, Col 1</td>
<td>Data: Row 2, Col 2</td>
<td>Data: Row 2, Col 3</td>
</tr>
</table>
Table styling has two pieces: the borders and the text. We apply these to the table, td, and th selectors, which mean the same as their HTML counterparts and allow you to style the different components of your table separately if you wanted to. We will be keeping them together for simplicity. Text styling is the same as paragraphs and has the same properties: color, font-size, and font-family which are explained in the CSS introduction section. Border styling is a bit more involved and detailed. There are a lot of interesting things you can do when styling table borders, but we are going to keep it as simple as possible. Here are the two properties you need to know to make your tables:
border: This property lets you set the width of your borders (in pixels), the line style, and the color. All three aspects are in the same line and are separated by spaces. See the example below and play around with border styles to learn more.
border-collapse: We set our borders to collapse because they would appear doubled up otherwise. This is because each table cell has its own surrounding border and this tag removes the space between them.
Here is an example of table styling in CSS:
table, td, th {
border: 1px solid #000000;
border-collapse: collapse;
color: #000000;
font-size: 16;
font-family: serif;
}
Websites aren't usually made of just one page, so yours won't be either! Adding a second (or third, or fourth...) page to your website is very easy and uses tools that you've already learned.
Here are the steps required to create a second page and set it up for development. These steps are written for the Code.org Web Lab.
Make sure to add a link back to your main page!
Linking to another page is really easy and uses the same link tag that we've already gone over. The only difference is in the href field, we write the file name of the page to link to. For example, if my second page's HTML document is called "new.html" then the line is:
<a href="new.html"<Link Text</a>
Check out an example second page!
Select the "View Code" button at the bottom of the screen. It is very hard to see and you need to hover over the white bar to view the items in the navigation menu.