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