The front-end of the web is based on three major technologies:
- HTML aka “STRUCTURE”: HyperText Markup Language (HTML) defines the structure and semantics of web pages on the web.
- CSS aka “PRESENTATION”: Cascading Style Sheets (CSS) sets the look and style of a web page. CSS provides style to the structure provided by HTML.
What is HTML?
- HTML = HyperText Markup Language
- HTML is used to create electronic documents (pages) that are displayed on the Web
- Each page contains a series of connections to other pages called hyperlinks
- Every page you see on the internet is written using HTML
- HTML ensures the proper formatting of content (text, images, video) so that your internet browser can display them as intended
- Tags = used to wrap content of a web page and define how the browser must format and display the content
- Elements = the end result of our tags once the browser has parsed the HTML and rendered based on our tag instruction
- Markup = the set of tags to structure a page
Let’s say that we had some text and we wanted to denote that this text was a paragraph.
This text is a paragraph.
We’d wrap the text in paragraph tags.
<p>This text is a paragraph.</p>
<p> to signal to the browser that everything that’s about to follow is part of a paragraph and
</p> to let the browser know that this paragraph is done. When a user visits our application, the browser loads up the HTML and parses it into the elements that will eventually make up our user interface.
Here is an example of a slightly more robust document:
Anatomy of a Tag
Required Structure of any HTML Page
<!doctype html>declaration: The doctype declaration is not an HTML tag, but rather tells the browser which version of HTML the page is written in.
<html></html>tag wraps the entire document
<head></head>tag wraps elements that shouldn’t be rendered: information about the page and how to process it
<body></body>tag wraps elements that should be displayed: the actual content
Setup for Today
Let’s head over to codepen.io for a quick tour + account setup.
- Create a directory called
- Create a sub-directory called
- Create a file called
Containing Elements, Semantics & Text
Let’s experiment with the following tags in codepen:
h1 - h6
Images and Attributes
We use HTML tags to mark up text to show its semantic meaning. The browser uses these tags to structure the document. Most tags have an opening and closing tag, but a few do not. Images—defined using the
<img> tag do not have a closing tag for instance.
Consider the following:
There are two things happening here. First, we have an
<img> tag that is somewhat unique in that it doesn’t have a closing tag like all of the other ones we’ve seen so far.
<img> tag needs an extra little piece of information. Our browser is more than happy to load up an image, but it’d be helpful if we told it where that image was located. That’s where the
src attribute comes in.
Let’s update our page from earlier with the image above.
Let’s take a moment to digress and discuss important things. Like “For Placement Only” (FPO) options in design. Often, you will find yourself forced to build interfaces before you have the requisite content. In such cases, you must avail yourself of FPO content. There are many options for FPO copy, images, and video on the interwebs. Here are some to get you started:
- Meet the Ipsums
- Lorem Pixel
- Article with useful sites for free icons, image assets, etc.
Another important tag is the
<a> tag. These are the tags we use for creating hyperlinks. Consider the following example:
<p> Welcome to the <a href="http://turing.io">Turing School of Software and Design</a>. </p>
In this case,
<a> tags need to know where they should link to. We use the
href attribute to set where the link should point to.
href is an abbreviation for “hyper reference.”
Block and Inline Elements
You might have noticed that the
<a> tag behaves a little differently than the
<p> tags. We can use the
<a> tag to mark up a few words, while the other tags denote a big section—let’s call it a “block”—of our page.
This is an important distinction:
- Block elements stack on top of each other. Each one starts and ends on its own line.
- Inline elements can be used to mark up a few words inside of a block element.
Some other inline tags you might see in the wild:
<em>is used to denote that you’d like to emphasize some text.
<strong>is used to denote that this text is important.
<strong> to denote the semantic meaning of the content.
You may notice that the
<em> tags are italicized and the
<strong> tags are displayed in bold. The browser does this by default. That said, you should still only use these tags to convey meaning. We can change the way stuff looks later with CSS.
All of the tags we discussed above have some kind of semantic meaning. Assistive technology devices will use them to help people with visual impairments understand the page. Search engines will use them to figure out the structure of your page. You should use semantic HTML tags whenever possible and appropriate.
I like to think of
<div> as the flavorless Jello of HTML tags, they don’t have any meaning in and of themselves and they typically don’t come with any built-in styling from the browser.
There is just one important difference between the two.
<div>is a block element.
<span>is an inline element.
We’ll discuss these more in a bit when we talk about CSS. But, for now, let’s move on to forms.
Forms: Inputs and Buttons
So far, we’ve done an excellent job of displaying information to the user, but we haven’t really asked them for their input. HTML also includes a set of elements for building forms.
There is a lot to forms that we’ll go into depth later, but for now just blissfully ignore.
Instead we’ll focus on two elements:
<input>creates an input field.
<img>in that it does not require or support a closing tag. It can take an optional
typeattribute that helps validate user input in some browsers.
<button>creates a button.
<button>on the other hand does support a closing tag.
Your Challenges (2)
1. Create this table
You can use codepen or create your own html file.
** Hint: Research the
table element in HTML
2. Create this Dog Party
First thing’s first, you’ll need to download the assets.
Now, in your
dog-party site directory, begin laying out the HTML for this site: