The Ultimate HTML and CSS Tutorial

What’s up guys, this is your guy for tutorials and in this article 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

and

while others do not such as
. 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 , , , examples of non semantic elements are , and . 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

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 tag is the trunk. Then there are two major branches, and , 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.

For the biggest heading.

For the Second biggest headino.

for the third biggest.

FOr the fourth biggest.

For the fifth biggest

for the six biggest. For paragraphs we will use

.. Paragraphs are automatically broken when we run out of space unless non terminating characters are used.. The

tag is placed in the tag and determines the title of the document. Whatever you put in the tags will be the title. The
tag created a line break in the HTML document. Notice that the
tag does not have a closing tag. It is what we call an empty tag. The

---

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 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 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 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 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 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 tag allows you to specify code. It is a semantic element that displays text in a different font compared.. The tag creates an element that is struck through, or scratched off. You can add text in place of the deleted text using ^{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 tag to insert text. This inserted text will have an underline, which indicates that it has been inserted. The 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 tag is used to write emphasized text. Any text that is emphasized is put in Italics. The 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 tag allows you to specify a key, or key combination. Just like the tag, it is also in a different font. The 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 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 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}

 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  tag creates a progress bar  that displays a scalar value.. It might look similar to the  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  tag or by telling what is happening. 

.Unlike the  tag, the  tag only has the max attribute and the value attribute.. 

The max attribute specifies the amount of work done. This can be any number or decimal number. The value attribute gives us the total progress done so far which is also a number or decimal number. The  tag automatically puts the text in quotes. The  tag is used to create a ruby annotation.  Ruby characters are special characters that Include Chinese characters, Japanese Characters, and Korean Characters..The  tag is used to write Ruby characters. Ruby characters are special characters that Include Chinese characters, Japanese Characters, and Korean Characters.  The  places text  on top of text. This is useful for explaining  foreign characters. The  tag creates a text element with strikethrough text. This is similar to the  but  is used to remove content from the document and  is used to strike out bad, outdated, or inaccurate information. The  tag creates text using the monospace font. This tag is used to show output from your computer, usually from a terminal, console, command prompt, or any command line interface. The  tag is used to create small text.  The  tag is used for important text so the text in this tag is bold.  The  tag is used to add subscripts to text. A subscript is text that is placed on the bottom right of text. They are rendered half a character below the line and are often used in Chemical Formulas and in Physics.  The  tag is used to create superscripts. A superscript is text that is placed at the top right of another word. They are rendered half a character above the line. Superscripts are used to denote powers in mathematics. A power tells you how many times a number is multiplied by itself.  The  tag is used to hide content when the page loads. The content inside this tag can be shown again using javascript. This is useful if you want to create HTML code that can be used over and over again.  If you don’t use the template tag, you would have to create the html content over and over again depending on how many times you wanted to use that HTML code.  The  tag defines a machine-readable tag that be used to add reminders to some calendars. It has an optional attribute of datetime which uses a time written in a time format as its value. The  tag is used the define some misarticulated or misspelled text. It has an underline just like the  tag. Whenever you are dealing with misspelled text, you can use this tag. The  tag is used to defines a variable in programming or in a mathematical expression. The content inside is typically displayed in italic. The  (Word Break Opportunity) tag specifies where in a text it would be ok to add a line-break.

Now we will learn about form tags. A form is a document with fields that can be filled out or left blank. The

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
search Links to a search tool for the document The target attribute has four possible values. _blank, _self, _parent, _top.. The target attribute determines where to display the response of the form after submitting the data. _blank displays the response in a new window. _self display s the result in the same frame, which is the default value, _parent displays the result in the parent frame. If a form is filled out in an iframe and the target attribute value is _parent, the result will be displayed in the parent window, getting rid of the iframe. _top displays the result of the form submit immediately. A form can had tags which are used to create fields, these fields may be labeled by other tags or labeled by other means. button Defines a clickable button (mostly used with a JavaScript to activate a script). checkbox Defines a checkbox
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”
The disabled attribute has no value, but disables the textbox when it is used. The tag can be used outside of a form if the form it uses is specified. The form tag is used to do this. The maxlength attribute has a value of a number that Specifies the maximum number of characters allowed in the text area The name attribute will give the text a name. The placeholder attribute has a value of a string that gives you a hint to what you should type in the textbox. Read only boolean makes this read only. Required attribute makes it mandatory to fill out the field. The wrap attribute specifies how text should be wrapped in the textarea. The hard value wraps the text when the form is submitted. The soft value does not wrap the text, which is default. The button tag is used to define a clickable button. Whenever a user wants to complete an action or do something, they press a button. Within button tags, other HTML tags may be used such as , ,
, , etc. The autofocus attribute with no value specifies that you want to automatically focus on the button. The disabled attribute with not value specifies that you do not want the button to be clicked. When this attribute is applied, the button will not be able to be clicked by the user, but can be clicked using javascript. The form attribute has a value of a string which specifies what form the button belongs to. This allows you to create submit buttons outside of a form tag. The name attribute allows you to specify a name for your button. The value attribute allows you to specify a value for your button. This value will be sent and interpreted when you do your post or get request.

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 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 elements must have a name attribute if they are used in a form. If a tag is used for the dropdown, the tag’s id. 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. 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 is to be used in the 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. 
The fieldset tag allows you to put several fields of input into a group. It creates a box around the input elements in it.  This tag has attributes such as dsiabled , form, and name.  Teh disabled attruibite Specifies that a group of related form elements should be disabled. The form atribute Specifies which form the fieldset belongs to.  Teh name tag specifies a name for the fieldset. The <legend> tag adds a title for the field group in between the line.  It defines a caption in the <fieldset> tag. This is useful for giving captions to fieldsets. This caption always appears in the top left corner of the fieldset.  The HTML <datalist> element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls. The datalist element allows you to add whatever value you want but gives you a list of suggestions. But the select element requires you to select one option from the list. Within the <datalsit> tag, we will create <options with value tags. For each item in the datalist.  The output ga is used to represent a result of an output. The example I am about to provide to you has a some javascript, but don’t woory I will go over it. It will be very easy to understand. 

==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 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.