Portfolio: Building the Shell
Introducing Tags
In this exercise, you will start designing the shell of your portfolio. You're going to learn how to use DIV tags and CSS to style the layout of the page, but first, an explanation.
HTML, Tags, and DIVs
HMTL
HTML stands for Hypertext Markup Language which simply means the type of code used to create the content of a website. A browser, such as Firefox or Interenet Explorer, uses HTTP or Hypertext Transfer Protocol to render the code into a displayable format on your screen.
It's important to understand this concept because in designing a website, you will be using HTML to create structure and content for your portfolio, and CSS to style to your page (we'll get into CSS in just a bit).
To create structure in a webpage, we use DIV tags. A DIV tag is essentially a "divisioned" section of a page. You may also be wondering what a "tag" is as well, so let's get into that.
Tags
A tag is a term assigned to a specific element in an HTML document and has specific rules to follow. For instance, to write a paragraph in HTML, we first need to declare that we're using a paragraph so the text appears as a paragraph. After the text, the tag is closed. See below for an example
<p>This what the HTML code would look like to display a paragraph</p>
Note how the carrots surround the letter "p" for the start of the tag, and how a foward slash comes before the "p" in the closing tag. Anything we want to display on a webpage must have a tag, from text, to images, to links. And, for every tag we "open", we must "close" it using a forward slash – </p>.
Common Tags/Elements
- <h1>Heading 1 text</h1>
- <h2>Heading 2 text</h2>
- <h3>Heading 1 text</h3>
- <p>Paragraph text</p>
- <ol>Ordered list</ol>
- <ul>Unordered list</ul>
- <li>Line item in an ordered or unordered list</li>
- <a>Link text</a>
- <strong>Bold text</strong>
- <em>Italic text</em>
Self-Closing Tags
- <img />
- <br /> – line break
- <hr /> – horizontal rule
DIV Tags
DIV tags work the same way, but if we only use a <div> tag, the structure won't have any predefined styling to it and would look the same every time we inserted a <div> tag.
Enter CSS. CSS or Cascading Style Sheets allows us to style HTML tags by applying an ID to the tag. We can give an ID to any HTML element. An ID is a name we create to identify a specific set of properties to style in CSS. Below is an example of how an ID is applied to a DIV tag.
<div id="content">Content of DIV goes here</div>
Now we won't require you to use code to build your portfolio, but it's important you understand how it works so you can apply these principles to your design.
We'll be using the design interface to build the structure of your site.
Next Steps
In the next exercise, you will begin building the layout for your portfolio.
Click here for the next tutorial
