Thanks to a growing number of software programs, it seems as if anyone can make a webpage. But what if you actually want to understand how the page was created? There are great textbooks and online resources for learning web design, but most of those resources require some background knowledge. This course is designed to help the novice who wants to gain confidence and knowledge. We will explore the theory (what actually happens when you click on a link on a webpage?), the practical (what do I need to know to make my own page?), and the overlooked (I have a page, what do I do now?). Throughout the course there will be a strong emphasis on adhering to syntactic standards for validation and semantic standards to promote wide accessibility for users with disabilities. The textbook we use is available online, “The Missing Link: An Introduction to Web Development and Programming” by Michael Mendez from www.opensuny.org. This course will appeal to a wide variety of people, but specifically those who would like a step-by-step description of the basics. There are no prerequisites for this course and it is assumed that students have no prior programming skills or IT experience. The course will culminate in a small final project that will require the completion of a very simple page with links and images. The focus of this course is on the basics, not appearance. You can see a sample final page at http://intro-webdesign.com/html5-plain.html. This is the first course in the Web Design For Everybody specialization. Subsequent courses focus on the marketable skills of styling the page with CSS3, adding interactivity with JavaScript and enhancing the styling with responsive design. You can see a sample site for the capstone course at http://intro-webdesign.com/
02.02 - HTML5 Tags and Syntax
Loading...
Do curso por University of Michigan
Introdução ao HTML5
8020 classificações
Na lição
Week Two
This week you will need to take a deep breath and jump into coding. I will cover a large number of HTML tags, but it is important that you do more than just listen to these video and read the text book material. You need to practice (and fail!) in order to learn. Believe it or not, once you master the basic idea of using tags and attributes you will know everything you need to use any HTML5 tag. The page may not look the way you want it to look yet, but you will be able to use text, links, images, tables, and even music and videos! If you want to refer to a textbook this week for reinforcement of concepts, we will be using the Shay Howe online textbook as a reference. I will include links after the lectures, but some students prefer to read before the videos. (My preferred approach is to read/watch/read again.)
Conheça os instrutores
Colleen van Lent, Ph.D.Lecturer
School of Information
Charles SeveranceProfessor
School of Information
This is it.
Today's the day, I'm finally going to teach you enough HTML that you can start
making an interesting page to share with your friends and family.
It's also, unfortunately, probably, or
at least hopefully, my first really big disappointment to you.
And the reason is, I need to just break it to you right away that
I can't teach you all of the HTML 5 tags.
I can't teach them all to you and you don't want me to teach you all the tags.
It would be incredibly boring for me to list them all off to you.
Instead I'm gonna get you started and
point you in the direction of where you can find resources for more tags.
Because it's really not until you need a tag that you
ever really bother learning about it.
Every tag has a beginning and an end.
So, right here I'm using what's called an h1 tag or
a heading tag to encase the words Hello World.
The first h1 is my start tag.
It just shows the simple tag that I want inside brackets.
The second tag, the closing tag, always starts with a slash.
The indicates to the browser, she's about to end a tag.
This is one of the most common, is to have the start tag and
the closing tag, with some sort of text inside of it.
My next tag, or the image tag, is what's called a self closing tag.
There's only one tag, and it contains both the beginning and the end.
In this case, as soon as the browser see's the image tag, it knows
that you're gonna give it information that it can use to create a picture.
And since there's no real text associated with the image, at least at this point, or
any that you want to show on this screen, it's going to close itself.
So, while every tag has a beginning and an end, some do close differently.
Also, some tags have what we call attributes.
So the source which is where the picture is located,
an href which is where the new page you want to go to is.
So when we talk about the tags, for
some of them I'll also be talking about the attributes.
Before we begin, I want to talk to you about one
of the most important attributes in an element and that's its display.
The two most common display types are what are called block and inline.
Block tags are ones that take up a certain amount of width and height.
So anytime you have a tag that's called block, it's the same thing
as if when you were typing, you hit newline at the end, or enter or return.
Inline tags are ones that only take up as much space as is needed.
I'm gonna show you examples of both, but
I really want you to understand some tags are block and some are inline.
And it may not seem important now,
but it's the kind of thing that's going to make it much easier for
you when you're trying to make your pages look a certain way.
So some of the most common tags, includes the ones I'm about to tell you about.
Headings are block tags.
You have h1, h2, h3, all the way down to h6.
These tags have what are both called syntax and semantics.
To the browser, at first sight, it might simply mean, hey,
everything that's in an h1 tag, I want to make it really big and bold.
And things that are h6, I also wanna make them slightly bigger and bolder, but
not nearly big and bold as the ones of the lower numbers.
What a lot of people do is they just kind of randomly throw around h3 tags or
h4 tags just because they like the look that the text takes on it.
But these tags also have semantics, kind of a meaning that you don't see when you
just look at it, and the semantics are, things that are in an h1 tag
have much higher importance than things that are in an h5 or h6.
And this is very important for people who are using screen readers.
If you start throwing h3 tags and h2 tags all over the place just because you want
them to be a little bit bigger and bolder, it's gonna be very confusing.
Another extremely common tag is the paragraph tag.
It's also block, and inside of it you can only contain other inline elements.
So you can put a lot of text, a lot of pictures and things like that, but
you should never put a paragraph inside of a paragraph or even,
you should never put a heading inside of a paragraph.
Another common tag is the div tag.
This is a generic section that tends to be larger than a paragraph, and
it's related content that you would like to group together.
Div's used to be the most popular tag.
You would use the div for everything.
The problem with div's is that there's really no semantic meaning behind a div.
If you put a lot of them to your page you're not giving your readers or
users any extra information to let them know that this is a footer or a header or
something along those lines.
Two additional tags that you'll find you'll use a lot are the list tags.
If you put in the tag OL that stands for an ordered list.
By default it's going to put each list item as one, two, three, etc.
You need to make sure that you end each of your list items
before you start the next one.
And you need to make sure that you've ended all your list items before you
end your ordered list.
The unordered list is very similar, only instead of using numbers,
you'll use special symbols, perhaps the circle, or the small square,
depending upon your browser.
Now, later when we talk about attributes, I'll mention that you can go ahead and
change your ordered list.
So instead of being regular numbers, you're using Roman numerals, or
uppercase letters, or lowercase letters.
But by default, these are just going to either be a one, two,
three, four, etc., or some sort of little disc.
Finally one more tag that I know you're gonna see a lot of is the line break tag.
Line break is simply a br, stands for line break, and this is a self-closing tag.
Now one of the things that's very important that I tell you is when you're
typing your code you can put as many line breaks in your code as you want.
Enter, enter, enter, enter, enter.
But the browser ignores all of it.
The browser is not going to put something on a new line,
unless it runs out of space or it specifically sees the br tag.
So I mentioned before with the lists that tags can have attributes.
Attributes provide additional information about an element.
Sometimes they're absolutely necessary, sometimes they're just supplemental.
The important thing to remember is that attributes are always, always specified in
the start tag, in the beginning, and attributes come in a name value pair.
So let's go ahead and look at a tag that needs attributes in order to work.
I'm gonna use the image tag as an example.
Images are inline which means you can actually put many
images next to each other.
And in order for an image tag to work,
you pretty much need to tell the computer what picture it is you want it to show.
So in this case, the source attribute that indicates the browser
that the picture you wanna show is called myPicture.jpg.
Always notice that again it's a name value pair.
So the name of the attribute it sorts and
the value always goes in double quotes, and in this case is mypicture.jpg.
Many people will just end right there, but I don't want you to do that.
Images should also always include an alt attribute.
Alt stands for alternative text, and
this is what's going to show up to somebody who's using a screen reader, or
even if the picture is missing for some reason, because you've misnamed your file.
This will allow, if you have the little broken picture, some sort of text to show
up, to help people realize what it is you're trying to show.
So in this case, I have one tag, which you can tell because of the bracket, and
two attributes, source and alt.
Now speaking of images there's a few things I want to mention to you.
Images rarely work the first time you use them.
They're either gonna show a broken link because you wrote the wrong file name or
you forgot to upload it or it's not in the right file, or
the picture is going to be too big or too small or something like that.
Unless you have the broken link, and you're just worried about the appearance,
I want you to just let it go for right now.
What we care about right now is that you can get tags to work.
We're gonna worry about appearance later.
So if you really have your heart set on making things look a certain way,
then make sure that you open up the picture in some sort of editor and
save it to exactly the size you want.
And give it a really good name.
It's very frustrating to work on your web page when all of your files are named
image underscore 02586.
Here's an example for you of one image tag with multiple attributes.
I have the image tag, followed by source logo.jpg.
I have the alternative text, which is info for the screen readers and broken links.
I include a title attribute, which will often display when you hover over
the image, and then I also have a class attribute, which might
indicate extra formatting, such as the height, the width, the position, etc.
As you learn more and
more tags, you're gonna learn that they have specific attributes.
It makes no sense for an image to also include some sort of href.
It makes no sense for a link to include other attributes.
But there are some that apply to many of the tags, so I just want to mention them
to you quickly and we'll come back to them later in the class.
The first is, well, the class attribute.
What is does is it applies special properties to groups of elements.
We'll use that later when we want to say,
hey, we want to style all these pictures perhaps as thumbnails.
Ids specify a very unique id to just a single element on the page.
And you're gonna want to do this if you want to link back to it,
if later you wanna apply JavaScript to it.
But ID says,, hey this is a special part of the page,
you're not gonna find anything else like it.
Style is an attribute that used to be very widely used.
Style lets you apply visual style.
So you can put in special colors or spacing and things like that.
The next one is called accesskey, and an accesskey is very important for
accessibility.
It allows a shortcut key to kind of activate, or put into focus, an element.
So, maybe you have a big page and you have a form or something on it, and
you want someone to be able to quickly get to a certain part of your page.
You can give them an accesskey.
In the same way, some people may be accessing your page and
only using the tab button to navigate through your page.
If you do that, you're gonna wanna be careful about putting what's called a tab
index, and it lets you actually specify which order
people get to different elements in your page.
So even though something may come later in the page, if you feel it's really
important you can put a high tag index and them get there quickly.
Okay, so one of the things I told you is that all tags start with a bracket.
Which is fine, that's very easy to figure out, and the browser knows whenever it
sees a bracket, it shouldn't display the content, it should do something fancy.
So what do you do if you want the browser to display a bracket?
And say, hey, this isn't a start tag?
Well, then you're gonna use special entities.
So if you want a bracket, then use & lt ;.
The lt stands for less than and please note that's an L, not a one.
You could also do & gt for >, & copy.
If you'd like extra blank spaces, you actually have to use a special entity.
Putting space, space, space, the browser ignores it.
You'd have to actually put & nbsp.
Again, if you want the cent, all right,
well what if you actually want an ampersand?
Well, in that case we even have a special entity for that, which is & amp.
So, we've gone through a number of tags today, and you're gonna learn more and
more tags and probably use cheat sheets and
go online to find a bunch of different tags you wanna use.
So an important this that I want you to know is,
how do you know the difference between a tag and an attribute?
And the key is to look for those brackets.
Also you're gonna want to make sure that you know which two symbols end
a self-closing tag.
All right. Don't forget,
that's where you have the forward slash in the closing bracket.
These are the kind of things that can really mess up your code when you try to
validate it later, and so being cognizant of these ideas in
the beginning will really help you write much cleaner code.
Explore nosso catálogo
Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.
O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.
© 2019 Coursera Inc. Todos os direitos reservados.
