Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Exploring basic HTML syntax

From: Up and Running with HTML

Video: Exploring basic HTML syntax

Earlier I stated that you could learn the basics of authoring HTML in about five minutes, and in this movie I'm going to put that to the test. I'll start by using the syntax.htm file that you can find in the 01_03 folder in the Chapter 1 folder of the exercise files. Now, keep in mind that as a markup language you're going to be using HTML to identify or, if you will, tag page content. To do that we wrap content in HTML tags. Let's say for example that we want to identify the line that we have on the page here as a paragraph.

Exploring basic HTML syntax

Earlier I stated that you could learn the basics of authoring HTML in about five minutes, and in this movie I'm going to put that to the test. I'll start by using the syntax.htm file that you can find in the 01_03 folder in the Chapter 1 folder of the exercise files. Now, keep in mind that as a markup language you're going to be using HTML to identify or, if you will, tag page content. To do that we wrap content in HTML tags. Let's say for example that we want to identify the line that we have on the page here as a paragraph.

So to do that all I have to do is place my cursor just in front of the line and I'm going to start a paragraph tag. Tags consist of several different pieces. the first thing we're going to use is a left angle bracket. It looks kind of like a less than symbol. Then I'm going to type in a p. p of course stands for paragraph, so there was always a character or characters that identifies which tag this is. And then finally, I'm going to do a right angle bracket that essentially finishes what's known as the opening tag.

So, we've identified this as a paragraph by opening a tag, and once a tag has been opened, all of the content that follows it is assumed to be part of that. So, when the content ends, we need do have a closing tag. So I'm going to go to the very end of the line and I'm going to add a closing tag. Now, closing tags look exactly like the opening tags, with one big difference. So I'm going to go ahead and do left angle bracket, but right after that I'm going to do a forward slash. That forward slash tells the browser or user agent at that point that, hey, this is where this particular element ends, and in this case of course, it's a paragraph.

So we have the opening tag here and we have the closing tag there, and it's the p character that identifies that as being a paragraph. Another thing that you can do to allow these elements is to have an attribute that tells the browser or the user agent a little bit more about that particular paragraph or heading or whatever it is that you are formatting. Now, not all elements have attributes, but most do. In the case of a paragraph, for example, one of things that we could tell a user agent is exactly which language this particular paragraph is in, and that's extremely helpful if you, say, for example, have a section of text that's all English and then one paragraph that's Spanish.

Well, you could tell the browser that this paragraph is Spanish. It's especially helpful for screen readers and other devices that might need to translate that for example. In this case, I'm going to place my cursor in the opening tag just after the p, and I'm just going to type in a space, because you want a little bit of whitespace between the tag's identifying characters and then in any attribute that's going to follow that. Now, the attribute that I'm going to do here is language. Now you'll notice that I have code hinting turned on and that's going to help me out a little bit, but you're free to type this in. I am just going to go ahead and type it.

For the language attribute, it's lang. Attributes are made of two parts. You have the name and then you have the value, so it's always the sort of name value pair. So the name of this attribute is language. I want to type in an equals so that I can pass the value of this, and then in quotation marks I'm going to type in "en" for English, and then close the quotation marks. So it doesn't really matter which attribute you're using. They'll always have this format: name on the left-hand side--whatever the name of the attribute is--an equals to pass a value, and then the value itself, and the value is always going to be in quotation marks.

So in this case we're saying, hey, this is a paragraph and the language that we're using for this paragraph is English. Now of course, you don't have to identify every single paragraph as English. Later on I'll show you guys how to do that document-wide, but I'm just giving you an idea of what an attribute looks like. Every time you use a tag to identify the content that goes inside of it, you can make the structures of your document and the formatting of your documents a little bit more complex, by nesting one tag inside of another. For example, let's say we wanted to italicize some of the text or emphasize some of the text within this paragraph.

An easy way for us to do that is to use the emphasis tag, or the em tag. So I'm going to go right into the same sentence here, and in front of this I'm going to start another tag. So you'll notice the format is exactly the same. We're going to do left angle bracket and then an em, and then close that, so there is our opening em tag or our emphasis tag. And then directly after the last sentence there, I'll go ahead and do a closing emphasis tag. So you'll notice that we have a tag or an element, if you will, nested inside of our paragraph.

The only rules that you have to follow when you're nesting one tag inside of another is that if you open a tag inside of a parent tag, you have close that child tag first. Let's say we wanted to go a little deeper. We could take paragraph and wrap that in a strong tag. Now strong is the same as bold really, so it's pretty much the same thing. So emphasis and strong means emphasizing this text, and strong means I am strongly emphasizing this text. So we've opened up a strong element. Now if I were to come in here and place the closing strong tag after the em tag, this would be incorrect, because I am opening a tag and then I'm closing another tag before I close that one. And that is incorrect, because now the nesting order is wrong.

So I need to take that closing strong tag and move it so that it closes before its parent tag closes. Now, you can see, I have two nested tags--the strong tag and the emphasis tag--and they all close in order. So, when you are building these more complex structures that's a syntax rule that you really need to keep in mind. The basic syntax of HTML really simply consists of tags and then occasionally their attributes. Let's take a look at a completed HTML page and then explore how the syntax works in a bit of a wider context.

So I'm going to go over to my exercise files and in the same folder, the 01_03, I'm going to open up the sample.htm file. Now again, if you're using a different code editor than mine, you may have to open that up a slightly different way. It does not matter, just as long as you can open it up and take a look at the code. Here we see a basic structure of an HTML document, and you'll notice the syntax behind nesting tags here as well. So at the very top of an HTML document, you have an HTML tag, and it identifies this document as being an HTML file. And then there is our closing HTML tag. Notice it is wrapping all of other contents so there is that rule of making sure that we close everything inside of a tag before we close the tag itself.

After the opening HTML tag, we have the head of our document. The structure of an HTML file is very, very simple; there are really three main elements. One would be regional tag itself. The second one would be the head, which we're looking at right now. We're going to go into this in more detail a little bit later on, but the head is where all of these sort of invisible stuff goes that makes the page work. Meta tags that have more information about the document, scripts that execute behaviors, styles that change the formatting of the page, things like that are going to go within the head.

Immediately following the head we have our body tag, and the body tag is where all of the visible content goes. So this is the stuff that you actually see within the browser. You can see, for example, we have a heading. This is our main heading. Then we have a paragraph, and then we have some code that's formatted in a preformatted tag. So we have all these different tags that we can use to identify content on the page, and that content is always going be within this body tag. Another thing that you may have noticed if you're quickly looking through this code is that this tag, the meta tag up here on line number 3, doesn't have a closing tag.

Not all tags have both an opening and a closing tag; some simply have an opening tag. With the meta tag, for example, it doesn't have any content inside of it like the title tag does, so it does not have a closing tag. In other instances, closing tags are optional. So those of course are all rules that you're going to have to learn as you begin to learn these elements, which ones need closing tags, which ones don't have them at all, and which ones are optional. That's the basics of HTML syntax, all in about five minutes or so. Now, from this point it's really just a matter of learning the different HTML tags and the attributes that you can use with them.

Show transcript

This video is part of

Image for Up and Running with HTML
Up and Running with HTML

49 video lessons · 25817 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 2m 12s
    1. Welcome
      55s
    2. Using the exercise files
      1m 17s
  2. 29m 30s
    1. Learning HTML
      2m 47s
    2. Choosing a code editor
      5m 2s
    3. Exploring basic HTML syntax
      8m 18s
    4. Do I need to learn HTML5?
      5m 6s
    5. Exploring HTML references
      8m 17s
  3. 35m 40s
    1. Exploring an HTML document
      5m 19s
    2. Working with doctype declarations
      4m 3s
    3. Examining the document head
      8m 20s
    4. Looking at the document body
      3m 21s
    5. Adding document structure
      8m 52s
    6. Lab: Coding a basic page
      3m 9s
    7. Solution: Coding a basic page
      2m 36s
  4. 1h 23m
    1. How does HTML format text?
      5m 51s
    2. Adding headings
      7m 24s
    3. Formatting paragraphs
      4m 54s
    4. Controlling line breaks
      3m 50s
    5. Creating lists
      10m 37s
    6. Emphasizing text
      6m 42s
    7. Displaying special characters
      5m 8s
    8. Controlling whitespace
      4m 35s
    9. Inserting images
      9m 20s
    10. Lab: Controlling page content
      13m 57s
    11. Solution: Controlling page content
      10m 55s
  5. 31m 54s
    1. Linking to pages within your site
      6m 45s
    2. Linking to external pages
      3m 2s
    3. Linking to downloadable resources
      2m 25s
    4. Linking to page regions
      8m 0s
    5. Lab: Creating Links
      5m 57s
    6. Solution: Creating Links
      5m 45s
  6. 40m 27s
    1. Examining basic table structure
      5m 10s
    2. Adding content to tables
      6m 20s
    3. Setting table attributes
      7m 42s
    4. Adding table captions
      4m 3s
    5. Defining table headers
      2m 13s
    6. Making table data accessible
      5m 46s
    7. Lab: Building tables
      4m 13s
    8. Solution: Building tables
      5m 0s
  7. 43m 23s
    1. Understanding the relationship between HTML and CSS
      4m 58s
    2. Creating inline styles
      4m 53s
    3. Exploring the style element
      5m 13s
    4. Basic font styling
      9m 24s
    5. Changing color
      4m 55s
    6. Taking styles further
      5m 24s
    7. Lab: Controlling basic styles
      5m 10s
    8. Solution: Controlling basic styles
      3m 26s
  8. 5m 44s
    1. Next steps
      2m 56s
    2. Additional resources
      2m 48s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Up and Running with HTML.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.