Scribd
Upload
5 views4 pages

html notes

The document provides an overview of HTML, emphasizing that it is a markup language, not a programming language. It covers various HTML elements, attributes, and their usage, including inline vs block elements, form handling, and semantic tags. Additionally, it highlights the importance of meta tags for search engine indexing and includes examples of HTML structure and syntax.

Uploaded by

kj.timotheus
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views4 pages

html notes

The document provides an overview of HTML, emphasizing that it is a markup language, not a programming language. It covers various HTML elements, attributes, and their usage, including inline vs block elements, form handling, and semantic tags. Additionally, it highlights the importance of meta tags for search engine indexing and includes examples of HTML structure and syntax.

Uploaded by

kj.timotheus
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

‭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.‬

‭‬
● I‭nline 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 another‬‭page‬‭on the‬‭site you are working (local) with or‬
‭an external website (like http://google.com).‬
‭●‬ ‭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 a‬‭dash‬‭(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]‬ ‭/dog.jpg”>)‬
‭●‬ ‭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 a‬‭name‬‭and‬‭content‬‭attribute.‬
‭●‬ ‭Linking two different web pages; go to blog page code and then do this‬
‭■‬ ‭(<a href=”index.html”>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.‬

You might also like