#100DaysOfWeb in Python Transcripts
Chapter: Days 5-8: HTML and HTML5
Lecture: Concept: Core HTML tags

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Let's review what we built here and talk about some of the important tags that we used. We always start an HTML5 document with DOCTYPE HTML
0:10 Don't say HTML5, but just basic, clean HTML. That's what that means. And then we're going to wrap the entire doc in an HTML tag.
0:19 At the top we put the head the head has a title but it also has things like style sheets, metadata and so on other stuff to configure the page
0:28 or tell consumers of the page like mobile browsers or search engines about the page. And then we get to our body
0:34 which has the main content over here and there close those tags of course as we said the most common and flexible element for layout
0:43 is the div it has no semantic meaning other than it sort of acts like a paragraph. It has what's called block layout.
0:50 Block layout is important because it means basically that element goes on a new line and things that come after also go on a new lines
0:57 shift doesn't flow around it inside there we put some images. Now images have inline layout. So that means they'll flow next to each other.
1:08 And we didn't have to do anything to get them to span across the top. That was great. We wanted to have some input.
1:14 So we have a form. And we have input elements like input type equals text, and other types. We'll talk more about that shortly.
1:22 And if you want to submit that we're going to have a button. And we going to submit that button you can even say type equals submit on the button
1:28 to make it super obvious. Now these both have either inline or inline-block layout. They seem like the kind of the same thing at first
1:36 but inline, those elements do not respect margin, padding, stuff like that. Whereas inline-block, do you could put a padding on a button
1:45 you could put margins on the button. So you may choose one or the other for that. Now, these are just the default values
1:51 so we going to choose them in there we are kind of acknowledging how they work. When we get to the design
1:55 then we going to talk about how we control that how we use that to our advantage. Of course we have our form that we put these elements into
2:03 and we going to submit them back. Often the action is just empty which means submitted back to the same page. Typically post is what we want here.
2:11 Then we want to an ordered list. It's layout style is block, by the list items. These are the elements of the list.
2:19 And then we can put things in them here we put a bunch of hyperlinks. Speaking of which, those a tags are hyperlinks
2:25 and their layout, of course, is inline as well. So those are most of the elements that were used to rebuild Yahoo. I mean, a lot of stuff on this page
2:33 but it's not that much considering what we built. Right Well those are the basic HTML tags and some of the key concepts around them.


Talk Python's Mastodon Michael Kennedy's Mastodon