Jen Kramer explains that HTML, the hypertext mark up language, is useful for structuring documents for the web. It does not convey any look to the web page, however.
- [Narrator] HTML, a mysterious thing you've heard about for years. You know it's required in order to make a website work, you know it as scary or frustrating and definitely more than a little mysterious. Even though it's fundamental to running the web, you don't know much about it, but now you're being called on to edit some website somewhere and you'd like to learn more about HTML. Let's start with the basics. HTML is the "Hypertext Markup Language". That's what HTML stands for, but that doesn't mean much does it? What on Earth are we talking about? According to the World Wide Web Consortium, hypertext is a word that was coined in the 1960's to mean text which contains links to other texts.
The website Tech Terms defines a mark-up language as computer language that uses tags to define elements within a document. HTML is one of the most commonly used mark-up languages. So to put that altogether and what does that mean, HTML is all about identifying commonly used structural elements like paragraphs, headings, lists, links, and more. We're going to use tags to identify these elements in our text so computers will understand the structure of a document.
This will make help with searching documents, search engine optimization, and making documents accessible to those with disabilities. So, let's go over those key points again. First, HTML is all about the page structure. Notice we haven't mentioned making something blue or a different font, that is not part of HTML. That is CSS or Cascading Style Sheet, which are beyond the scope of this course. Your web browser has a certain horrible, ugly look that it assigns to raw HTML, but HTML has no inherent look of it's own.
CSS can be used to make your webpage look however you want it to look. Second, HTML is all about the tags. There's a tag for every need it seems and I'm going to go over several of the most commonly used tags in this course, however, there are many other tags that you can work with. Finally, the right tag for the right structure. If you're representing a paragraph, use a paragraph tag. If it's a quote, use a quote tag. We'll talk more about this in future videos.
So, let's quickly go through how HTML is formed. Here's an example of a link. This is made up of opening and closing tags in this case, the "a tag". A stands for "anchor" and it's used in creating links. You'll notice in the opening tag, we have a few modifiers available to us. These are called attributes. The "H ref" attribute stands for "hypertext reference". In other words, where do we want this link to go? The underscore target attribute addresses where we would like this link to open.
In this case, we want it to open in a new window rather than the default behavior of opening the link in the same window that we're already looking at. The words in between the opening and the closing tags are the text that's effected by those tags. In this case, the text will function on the page as a link. How will it look? Well, that depends on what the CSS says. By default, links are blue and underlined according to our browser's style sheet, but it's likely your website developers have overwritten that behavior and made it look somewhat different.
Finally, you can have tags nested inside of tags. Here, I've used the paragraph tag or "p tag" to wrap all the way around our text. I moved the location of the "a tag" to surround the words "Lynda.com", notice that the tags are nested inside of each other like wooden dolls. The "a tag" is completely contained within the paragraph. That's the proper way to work with your HTML tags. You can't close the paragraph before all of the other tags inside are closed.
Occasionally, you'll find a tag that doesn't need to be closed like the image tag. But generally speaking, tags are required to be closed. Now that you've been introduced to the concepts of a tag, an attribute, and how tags nest, let's look at other tags in our HTML document.
- Working with head and body tags
- Nesting one list inside of another
- Creating links within a page
- Linking to PDF files
- Quoting and citing text
- Fixing HTML in MailChimp