Traversy Media - Youtube
27 January:
● TML
H
● Hyper text markup language
● Html is NOT a programming language
● Html is a markup language
● <br/> tags are self closing AND do not have any content in them. This tag is used in
xhtml and not html5 (<br>)
● In the head area; we put things like page title, links to css and javascript files, metadata
such as descriptions and keywords.
● <!DOCTYPE html> , this explains what type of document the page is.
● Comments (<!-- heading-->) that's to say where the headings (for example) will go. It
wont display on the actual webpage. Only the developer of that webpage will see it.
● Dummy texts are just sample texts used for developing. (type ‘Lorem’ then press ‘tab’)
● “User agent stylesheet” when u hit (shift tab i), is the default browser styling
● In css styling, the ‘before and after spacing (em)’ is the top and bottom of a paragraph
AND the ‘start and end spacing’ (px) is the left and right of a paragraph.
● Inline level Elements vs Block level Elements.
● Inline level Elements: do not start on a new line, and take up the width that's necessary.
● Block level Elements: starts on a new line, and takes the full width available.
● Inline level elements examples: <span>, <img>, <a>.
● Block level elements examples: <div>, <h1> - <6>, <p>, <form>.
● <strong> = makes the text stand out. (by default its actually the same as <bold>, but you
can add on as you move into css)
● <em> = emphasizes text. (by default its in <italic>, again you can change ti to whatever
style needed once in css)
● Links (<a>) can be used to go to anotherpageon thesite you are working (local) with or
an external website (like [Link]
● Link tags are given an attribute like (href=” ”), now this attribute is the location of what we
want the link to open.
● Only use the <target=”_blank” attribute tag if you want to link an external website so that
it opens that external website on a new tab, if you are linking another page of your
website, then don't use that attribute tag.
● All html tags have attribute tags.
● Attribute tags provide more information about the element, for example (the href
provided in a link [<a>] directs it to a certain location/website link.)
● The placement of the attribute tags are as follows;
■ They are always placed at the start tag.
● 2 types of lists; unordered lists (<ul>)(bullet points, square points,etc) and ordered lists
(<ol>)(numbered)
● ( <tr>) table rows.
● (<th>) table headings.
● (<td>) table data
● For form tags, you can add the attribute ‘action’, this will submit the form to a certain
page like a php page.
● Another attribute for forms is “method” (method=”POST”) = means that you are making a
post request to a server. This attribute is used to add data to a database. It is secure.
● However, the (method=”GET”) this request is not very secure since it will display the
data in the url bar.
● Putting in (“input” then press tab) will allow a little box where the user can add info.
● Input tags have a lot of attributes. For now, we will use the attribute (type) (<input
type=”text”).
● You also get the (type=”email”), this adds a little validation that does not need javascript.
● If you try to submit the form and the email address is not valid, and we have the
(type=”email”), then it will give an error pop up. So use (tpe=”email”) when dealing with
emails.
● <br> line breaks are used to separate texts.
● <hr> horizontal rule, is like a horizontal ruler line.
● Camelcase, for example is (lastName), so starting with a lowercase letter and changing
the second word to uppercase word. Another example (firstName). So we DO NOT have
to use the one with adash(first-name) or (last-name)
● (<textarea>) This is like a bigger text input.
● (<select>) lets you pick an option given like (male or female)
● Each (select) will have a couple options, so you put an option tag, and then have a value
associated with each option tag. CHECK BELOW FOR EXAMPLE.
<select name=”gender”>
<option value=”male”>Male</option>
<option value=”female”>Female</option>
<option value=”other”>Other</option>
</select>
● U se the (placeholder) attribute to display that “enter first name” text that will go away
once you've typed a name in the designated area. (placeholder=”Enter first name”)(fyi--
you use this in your input tags)
● For the images tag, (img src=”....”), you will have a folder on your computer that contains
the images you will use for the website, so make sure that the images you want to use
are in the images folder and then specify further when you use the tag. Like
(<img src=”Images[specify where to find the image] /[Link]”>)
● Quotation tags; which are <blockquote> and <abbr> [abbreviation] and <cit> tags
● (<blockquote cite=”...”>) tells you where the quote comes from.
● <abbr title=”....”> tells you what the fool word is for a given abbreviation.
● <cite> gives the italic style, letting the browser know that this is something that is being
cited.
● Semantic Tags describe the elements meaning to both the browser AND developer.
○ <header>
○ <footer>
○ <aside>
○ <main>
○ <article>
○ <nav>
<section>
○ <details>
● A navigation bar (also called a Navbar) is a user interface element within a webpage that
contains links to other sections of the website. (<nav></nav>)
● Use meta tags so when google indexes your web pages or website, it will look at the
description and keywords,etc. Google looks at this stuff when they scan your website.
● Meta tag to use in the head area;
○ for example (<meta name=”description” content=”Cool
Blog by Jane Dane”>)
○ <meta name=”keywords” content=”web design blog, web
dev blog, traversy media”
● Meta tags have anameandcontentattribute.
● Linking two different web pages; go to blog page code and then do this
■ (<a href=”[Link]”>Go to Index Page</a>)
■ you can make it show up on the same tab or make
it show in a different tab by using (target=”_blank”)
■ AND VICE VERSA.
QUESTIONS TO ASK:
1. What is the class tag , how is it used, and when should it be used.