What’s up guys, this is gamesational and in this video i’m going to teach you all of html and css. That includes all tags and attributes of html and all css properties and their possible values.
Tags are text sections that create HTML elements. Some tags contain content such as <div> and <p> while others do not such as <br>. I will be going over each of these tags in detail by explaining what they do and how they can be used.This knowledge is essential for creating webpages from scratch. Many people will create wordpress websites or use website builders like wix.com, weebly, and squarespace, but if you want to gain a complete understanding of every element and how html and css works you may watch this entire video. To make navigating through the video easier. Several timestamps have been placed. These timestamps will be placed in the description, and you can click on them to jump to a point in the video. Now without further ado, let’s get right into the html.
HTML or Hypertext Markup Language is a standard for creating internet documents. These documents are the core of the world wide web as we know it. Alternative standard have been used such as xhtml, but this is the most commonly used. The syntax of html is as follows. THe opening tag is put in a less than sign and a greater than sign. To end the html element, a closing tag is added. Closing tags have a “/’ before the start of the tag, also enclosed in the leeds than and greater than sign. Usually the first tag you would want to include in your document is a doctype declaration. This tag is used to declare what version of HTML you will be using. WIthout this tag, your browser will render the page in “quirks mode”. Quirks mode is the original way html pages were render befer web browsers such as internet explorer 6 came out. If your page is rendered in QUirks mode, several features found in modern HTML would be unavailable,. In QUirks mode box models will be handled using a different algorithm than modern pages. Almost standards mode may also be used if a doctype is not specified. In this tutorial, you will see semantic elements. Semantic elements are elements that clearly describe their purpose. Examples of semantic elements include <section>, <article>, <form>, examples of non semantic elements are <div>, and <span>. In general, if you cannot tell what an element does just by looking at it. It is not semantic. Semantic elements increase web page SEO or Search Engine Optimization, which is a way to improve your ranking on search engines.
HTML documents are usually written like this.. First all html is put into a html tag. Then there is a <head> tag on the top. Which is used to include scripts, metadata and external resources. Then there is a body where the actual content of the webpage lives. All of these tags are closed with ending tags. It’s like the parent of children. The parents have children and their children can have children. This is essentially how a tree structure works. The Document Object Module is like one giant tree. The <html> tag is the trunk. Then there are two major branches, <head> and <body>, then there are a multitude of branches or elements. And those elements have even more branches. So on and so forth.
Now we will move onto the headings. To write To write headings Use these tags. <h1> For the biggest heading. <h2> For the Second biggest headino. <h3> for the third biggest. <h4<> FOr the fourth biggest. <h5> For the fifth biggest <h6> for the six biggest. For paragraphs we will use <p>.. Paragraphs are automatically broken when we run out of space unless non terminating characters are used.. The <title> tag is placed in the <head> tag and determines the title of the document. Whatever you put in the <title> tags will be the title. The <br> tag created a line break in the HTML document. Notice that the <br> tag does not have a closing tag. It is what we call an empty tag. The <hr> tag creates a horizontal line, or a thematic change. This is usually done to separate content. Comments are written like this. Less than “explanation mark,dash dash. Your comment here” dash dash greater than sign.
To create links we will use the <a> tag. To define the link the url will point too, we will use the href attribute by setting it equal to the url in the address bar. The <abbr> tag specifies an abbreviation of a word. It is usually placed between paragraphs. The title attribute can be applied to this tag to create a tooltip. If I type in this you can see the tooltip show the title attribute value. The <address> tag allows you to provide contact information for you or a business , or an organization. If you add a href tag, you can link to an email address, a telephone number, or another element on the page! The <bdi> tag specifies that the text goes in a different direction and that it needs to be isolated. If the text direction of a text is different then the rest of the page, for example when writing arabic or hebrew. The <bdo> tag is used to change the direction of text. It has a dir attribute which allows you to change it’s direction. You can either change it to ltr which means left to right, rtl which means right to left.
The blockquote tag allows you to specify a blockquote which is a quote that has it’s lines indented. The cite tag allows you to cite a work and can be placed inside a text element. It is not recommended to place outside of a text element or right next to the material or image in question because the <cite tag does not create any line breaks. The <code> tag allows you to specify code. It is a semantic element that displays text in a different font compared.. The <del> tag creates an element that is struck through, or scratched off. You can add text in place of the deleted text using <sup> tag. The superscript tag creates a superscript, or small text that is higher than where it’s supposed to be. Alternatively, if you don’t want a superscript, you can use a <ins> tag to insert text. This inserted text will have an underline, which indicates that it has been inserted. The <dfn> tag specifies a definition for a term. When it is used, the text in it will be in Italics. You can use it to created words for the definition of words. The <em> tag is used to write emphasized text. Any text that is emphasized is put in Italics. The <i> tag is used to mark text that is different in prose. Prose refers to a tone of voice or the way someone is speaking. If someone increases their pitch or decreases it, you might want to use this tag. Or if you just want italics you can use this tag. The <kbd> tag allows you to specify a key, or key combination. Just like the <code> tag, it is also in a different font. The <mark> tag creates an element that is highlighted. The color of the highlight can be changed using css, skip to the css section if you want to learn more. The <meter> tag is used to create a bar that can display value by creating a scalar measurement. The attributes that apply to this element are form, high low, max, min optimum and value. The value attribute is always required when using a <meter> tag. It can either be set to a percentage or a number. If it is set to a percentage you need to set the value attribute to a decimal number less than 1 but greater than or equal to 0. If you want the value to be a normal number, the max attribute must be set to the highest number and the min attribute must be set to the lowest number. All other attributes are optional and I will go over them now. The form attribute is used to tell what form the meter belongs to . The high attribute specifies what number can be exceeded before the quantity is considered high. The low attribute specifies how low the value can go before it is considered low. Finally, the optimum attribute specifies the optimum value for the meter. The <pre> tag creates text that is not formatted and does not ignore spaces and lines. The text is displayed in a fixed width and line breaks are preserved.. This means that the text will be displayed exactly how it is is in the html document. The <progress> tag creates a progress bar that displays a scalar value.. It might look similar to the <meter> element, but it works a bit differently.The progress bar shows how much progress has been made towards the completion of a task.. You should always label your progress bars either by using the <label> tag or by telling what is happening.
.Unlike the <meter> tag, the <progress> tag only has the max attribute and the value attribute..
Now we will learn about form tags. A form is a document with fields that can be filled out or left blank. The <form> tag is used to create a form. The form tag has many attributes such as accept-charset, action, autocomplete, enctype, method, name, navalidate, rel, and _target. The accept- charset attribute has a value of a character set. Common character set’s include UTF-8, and ISO-8859–1. A full list of character codes can be found in the description. The action attribute has a value of a url. It tells the browser where to go when the form is submitted. The enctype attribute determines how the form data should be determined. It can have a value of “application/x-www-form-urlencoded” the default option, “multipart/form-data”, where no text is encoded (this is required if you are doing a file upload)“text/plain ” This attribute determines where the form is sent The method attribute determines the method that is used to submit the form. If you use the get method, data will be sent using the url. It is absolutely not recommended to use get requests for passwords or other personal information. If you want to send personal information, use the post value. Post data is securely sent to the action page in question.The name attribute allows you to give a name to the form. To prevent all validation by the browser, specify the novalidate attribute, which does not have a value. The rel attribute specifies the form’s relationship with the document.external Specifies that the referenced document is not a part of the current site. The rel attribute can have a value of external,licence,next,nofollow,help, noopener,noreferer, opener,a and prev.
The example value links to a help document. License links to copyright information for the document. Next links to the next document in a selection. Nofollow. links to an unendorsed document, like a paid link.(“nofollow” is used by Google, to specify that the Google search spider should not follow that link) noreferrer Specifies that the browser should not send a HTTP referrer header if the user follows the hyperlink open.The prev value links to the previous document in a selection
color Defines a color picker
date Defines a date control (year, month, day (no time))
datetime-local Defines a date and time control (year, month, day, time (no timezone)
email Defines a field for an e-mail address
file Defines a file-select field and a “Browse” button (for file uploads)
hidden Defines a hidden input field
image Defines an image as the submit button
month Defines a month and year control (no timezone)
number Defines a field for entering a number
password Defines a password field
radio Defines a radio button
range Defines a range control (like a slider control)
reset Defines a reset button
search Defines a text field for entering a search string
submit Defines a submit button
tel Defines a field for entering a telephone number
text Default. Defines a single-line text field
time Defines a control for entering a time (no timezone)
url Defines a field for entering a URL
week Defines a week and year control (no timezone) The autofocus attribute specifies that a text area element should be automatically focused on. The cols attribute determines how many columns there are, and the rows attribute determines how may rows there are. Both accept integer values. To specify the direction of text we use the dirname attribute. The dirname attribute must have a value of the name of the element you want to get the direction of and “.dir”
In order to use the next few attributes, your button element must have a form attribute with a valid id if it is located outside of the form.
If you want to submit a form using a button, you should use the formaction attribute. The form action attribute has a value of a url and sends form input to that page when it is clicked. It must be used with the form attribute, otherwise we would not know what data to submit to the form.
The form enctype attribute determines how the form data should be encoded before being sent to the server. It can have a value of “application/x-www-form-urlencoded” the default option, “multipart/form-data”, where no text is encoded (this is required if you are doing a file upload)“text/plain ”. The formmethod attribute determines the method the form will referenced by the button element will be submitted with. It has value of either get or post. Like I said earlier, get submits information by putting that info in the url which is useful for search engines, while post does not do this. The form target attribute specifies where to display the response of the form. It’s values are _blank,_self,_parent,_top,framename, _blank displays the result in a new window. _self displays. _self is the default value and displays the result in this window. _top displays the value in the same window using different url. You already now about these values. Finally, buttons have the type attribute which determines what kind of button they are. Possible values of this type include button, submit, and reset. Teh button value means that his button is a clickable button and won’t take you anywhere. You can use it to trigger certain events on the page. The submit value submit’s the data of the form specified in the form attribute. And the reset value removes all values in the form specified in the form tag. The form attribute should have a value of form id.
The <select> tag is used to create a dropdown list. For aesthetic purposes some people style their dropdowns or create new ones entirely but we aren;t going to do that in this tutorial. Select tags are often used in forms to select an option from many differen types of things, likes selecting the color of a car. All <select> elements must have a name attribute if they are used in a form. If a <label> tag is used for the dropdown, the <label tag must have a for attribute with the value of the <select> tag’s id. <option> tag’s define options for dropdowns. They can have attributes of name and value. The autofocus specifies that the drop-down list should automatically get focus when the page load. The disabled attribute, specifies that a drop-down list should be disabled. The form defines which form the drop-down list belongs to and has a value of form id. Teh multiple attribute specifies that multiple options can be selected at once. The name attribute defines a name for the drop-down list. <options> can also agave slelevtcted attributes. Selected attribute preselects an option while disabled attribute disables the option. The required attribute specifies that the user is required to select a value before submitting the form. The size attribute Defines the number of visible options in a drop-down list. If you specify more options than what the size attribute specifies, a scroll bar will appear that will allow you to scroll through all options. The <optgroup> is to be used in the <options> tag and specifies a related group of options by adding a non selectable item to the dropdown menu. It’s attributes are disabled, which disables all options in that group and label that specifies that label for that group.
The <label> tag allows you to set labels for various inputs such as the <input> tag and the attributes which it has, <meter> <progress> <select> <textarea>, The for attribute specifies what element id the label is from. The form ttag specifies which form id the label is for.
==Begin Detailed Tut==
for element_id Specifies the relationship between the result of the calculation, and the elements used in the calculation
form form_id Specifies which form the output element belongs to
name name Specifies a name for the output element
Now let’s talk about iframes. Iframes are little pages within wepage that can behave just like a normal webpage. They can be be scrolled, clicked interacted with and other things. The <iframe> is used to embed a webpage onto another webpage. It’s most important attributes are src and title. The value of source or src defines the url of the iframe. If it is invalid, you will see this icon. The title attribute determines the title of the iframe. This is not really useful, ut it’s seems the World Wide Web Consortium still specified it in their standard.
All HTML tags may have global attributes in this list. The access key attribute allows you to specify a key that will allow you to focus on an element. You set this attribute equal to a key in the element. .To select an element with this attribute,IE, Chrome, Safari, Opera 15+: [ALT] + accesskey. For Mac’s you hold Ctrl+Alt+Access key at the same time. Any html element may have a class attribute which allows us to group and style sets of elements with the same class. The contenteditable attribute determines if you can edit the element, if true you can edit if false you cannot edit.. The data-* attribute is a special attribute because it allows you to specify a custom type. The data- attribute can have any text after it and it can be equal to or set to any value. The dir attribute set’s the direction of the text and can have values like ltr, which is an abbreviation or stands for ‘left to right’, rtl which stand for right to left, and auto which let’s the browser automatically determine the direction of the text. If you are writing languages such as arabic, they will be written right to left. The draggable attribute specifies if the element is draggable or not, if equal to true you can drag it, if false you can’t. The lang attribute sets the language of the element, if the lang attribute is set to “en” for example, it’s language is english and will be interpreted as english. For a full list of language codes, please check out the language code reference. The spellcheck attribute determines if the element can be spell checked and has a value of true or false. If true, your browser will use it’s built in spell checker to check the spelling in the element. This is useful in a textbox field. If false, the spell checker will not check the element. The style element will allow you to style the element within the html tag itself. More info on styling html elements will be provided later. The tabindex attribute will allow you to navigate elements using the tab button. The tabindex attribute determines the order in which tab elements are selected. Element with tabindex =1 is selected first. Element with tabindex =2 selected second. The title attribute controls what will be written in the tooltip when the user hovers on the element for 2 seconds. A tooltip is a box with text in it that describes an object such as an html element. The value of the title attribute will be displayed in the tooltip text. The translate attribute determines if a the element should be translated. It has a value of yes or not. If yes, the element will be translated, if not the element will not be translated. Also, keep in mind that some attributes do not have values.
There are also events that apply to every attribute.