Html Tutorial: Basics lesson 1
LEGEND:
** = Void Elements which have no start and end tags ex: <br />(some void elements have a space between their characters; i.e the 'br'and the forward slash. If you omit this space, older browsers will have trouble rendering the line break, while if you miss the forward slash character and just use <br> it is not valid in XHTML.
<audio> (Both share common attributes.) <video>
<audio src="audio file+extension"></audio>(unlike the img tag, it has a closing tag). In order to play the audio, you must add the "autoplay" attribute, however you also need the "controls" attribute to control the play of the audio(all modern browsers have it now). you can loop the audio with the "loop" attribute. *In general, you should try using .mp3 audio, for they work in most browsers.
The <section> element
<section> is a logical container of the page or article. Sections can be used to divide up content within an article. For ex.. a homepage could have a section for introducing the company, another for news items, and still another for contact information
Table
<tr> means table row <td>means table data <th>means table header.(always bold and centerd) but represents table column. you can add anything that goes into the body in the table, (images, txt, links,etc.). <td bgcolor="red">Red</td> (it's possible to change the background color of a cell using just HTML.)
The <frame> tag.
A page can be divided into frames using a special frame document, Frames divide a web page into separate sections that work in tandem with the main page, ex:(http://docs.oracle.com/javase/7/docs/api/) In order to indicate its size the frameset tag uses the cols and rows tag:(<frameset cols="100, 25%, *"></frameset> <frameset rows="100, 25%, *"></frameset>) *The <frameset> tag is not supported in HTML5. We use the <noresize> attribute to specify that the user CANNOT resize the <frame> element:(<frame noresize="noresize">) *frame contents should be defined using the SRC attribute.
HTML 5
In HTML 5 the doctype declaration <!DOCTYPE HTML>, and the character encoding is alwo simplified <meta charset="UTF-8">.(The default character set). In HTML, elements typically belonged in either the block level or inline content model. HTML5 introduces seven main content models. - Metadata - Embedded - Interactive - Heading - Phrasing - Flow - Sectioning .
Types of Elements
In HTML, most elements are defined as block level or inline elements. Block level elements start from a new line. For example: <h1>, <form>, <li>, <ol>, they take up an entire row of space and move other elements out of the way when input into the same line. Inline elements are normally displayed without line breaks. For example: <b>, <td>, <a>, <strong>, <img>, <input>, they(unlike block elements don't need their own space to function properly, they can share space, ie: two image files can be placed agacent to one another.) Inline elements cannot contain any block level elements.
<a>
Stands for anchor, it is the link tag which makes regular things(text, pictures, videos...) clickable. Needs an attribute to function Ex: <a href="http://www.google.com">google</a> *it is possible to input into the reference field an html document, but only if the document is also in the same folder as the document you're using .(it must also be refered to by name, i.e:(index.html). can also be used to send an email to someone. i.e : <a href = "mailto:[email protected]">Email Pete</a>(problem with this is that it opens up the default e-mail client on the users' pc..usually outlook, and nobody likes that, so it's easier to just write down your email on the site, then the user can just copy and paste). The target attribute specifies where to open the linked document.<a href="website" target="_blank"> a blank target tells the browser to open the link in a new tab. It is possible to create a link within the same page, (for easy navigation) and instead of using the href attribute, the name attribute is used instead to merge the <a> tag with the designated name, like so; <a name="the name">"can be left blank"</a>::The name of the section....<a href="#the name">a link to the name</a>
<br/>
The (Single line break) tag is used to add a single line of text without starting a new paragraph. (The <br/> element is an empty HTML element. It has no end tag)
<Section>
The <Section> tag defines a segment in the webpage, it's similar to the <h1-6> tags in the sense that a section below another is always smaller even if the have the same <h1> tag.
<body>
The <body> tag is usually found beneath the head tag, and represents the document's body which keeps other HTML tags like <h1>, <div>, <p> etc
** <br/> **<wbr/>
The <br /> element is an empty element (has no opening and closing tags and also has nothing that goes in between) which functions as a <p> tag in that anything that follows it starts on the next line directly below. (usually goes into a <p> tag. ex; <p> hello <br/> there </p>. The <wbr>(word break opportunity) tag is an optional break tag, it creates a line break when it sees fit(when a word is too long to fit across the width of the screen..)similar to (race- car)situation.
Div and span
The <div> element defines a block-level section in a document. The <span> element defines an inline section in a document.
**The <div> element <div id="header">
The <div> tag defines a division or a section in an HTML document. The <div> tag is used to group block-elements to format them with CSS.
<title>
The <title> tag is used inside the <head> tag to mention the document's title. The title is what's shown atop a tab in a browser, it's used by search engines to find web pages.
The <article>Element
The article is a self-contained, independent piece of content that can be used and distributed separately from the rest of the page or site. This could be a forum post, a magazine or newspaper article, a blog entry, a comment, an interactive widget or gadget, or any other independent piece of content. #the <article> element replaces the <div> element that was widely used in HTML 4, along with an (id) or (class). #when an <article> element is nested, the inner element represents an article related to the outer element, blog post comments count as article elements nested in bigger the bigger <article> element which is the blog post.
XHTML and CSS
XHTML(Extensible Hypertext Markup Language) is the core foundation for any website, with it you can add content like images, text and other forms of data into the construction of the website. CSS(Cascading Style Sheet) is the designer, changing the font, colour, and background of almost everything in the website.
The <footer> element <footer>...</footer>
The footer element is also widely used, Generally we refer to the section located at the very bottom of the web page as the footer. *information usually provided between the footer tags.- Contact Information, Privacy Policy, Social Media Icons, Terms of Service, Copyright Information...
** <hr/>
The horizontal rule(now called the "thematic break rule") tag is used to visually break-up sections of a document. The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly. The horizontal line can be modified using the attribute "width" which in turn can be modified to be either a certain number of pixels large, or percentage of it's original size bigger or smaller.
** <img>
The image tag, the image tag is what is used to insert an image document(no matter the format) into a website. *The image file must be in the same folder as the original website file. * The tag requires the (src) article to function, it informs the website of the image files' location. * the <img> tag also uses the height and width articles to re-size the images. * the browser always loads the image in it's original size first, then it either shinks or elarges it depending on the developer's preference.. you won't save load time by inputting a smaller image.(prefered way is to change the image's dimentions with photo re-sizing software like photoshop.) To create a background image, the body element has an attribute called the background.<body background=imagename .jpg>...</body>. In most cases, stating the width and height for an image leaves us with an image that looks wrong in terms of width to height ratio, the trick then is to define either the height or the width, not both, that way, the browser sets the latter to match the image's original ratio.
** <input />
The input tag, is an empty element that is used to create the area where form information is filled out. The input element has various attributes like the method attribute:<type="text/password"> (not to be confused with form method:<method="post/get">) Other attributes for the input tag include:radio(<input type="radio" name="gender" value="male" /> Male <br />):checkbox(<input type="checkbox" name="gender" value="1" /> Male <br />).
<center>
You can use the <center tag to put anything in the center of the page or any table cell ex; <p> This text is not in the center. </p> <center> (before the <p> tag) <p> This text is in the center.(centered) </p>
<ul> <ol> <li>
Un-ordered list Ordered List List item Table data tags <td> act as data containers within the table. They can contain all sorts of HTML elements, such as text, images, lists, other tables. <start='2002' (reversed)>attribute for <ol>tag, can also be reversed. <ol type='a/A' makes it into letterd lists. >
Attributes
an attribute is more information that a tag needs to function, for example the <a> tag which cannot function on it's own, and needs an address to properly work. Attributes are placed into the oppening tags of elements that require them to work. ex<a href=(hyperlink reference)"www.google.com"> :: <a href="http://google.com"></a> <a name="nipple"> </a>(accompanied by : <a href="nipple"> </a> :: The <a> tag also has an attribute called the title attribute, and it gives a small popup below the highlighted word when the mouse cursor hovers above it(a tooltip).. i.e: <a href = "http://google.com" title ="a search engine ">. (you can have more than one attribute in a tag, and they will both work as long as they don't touch)
colspan
column span is a tag that lets the selected information that is entered into the tag span more than the original one column. :<th colspan ="2">nipple</th>
Forms
Forms are used to collect information from the user, forms are defined using the <form> element. Use the action attribute to point to a webpage that will load after the user submits the form. <form action="http://www.sololearn.com"> </form>. Forms are usually submitted to a web page on a web server.
**The <header> element <div id="header">
The header tag is used within the body of the website and can be used multiple times if required, e.g. to determine the top of an article. The header is used to determine the header of a section of the document, ie; the header for the fifth paragraph.
A generic HTML5 webpage structure.
Contains: <header>-contains branding like logo. <nav>-contains navigational section of the site. <article>-the web page main content. <section>-divided section of main content. <section>another section of the main content. <aside>-contains extra information and related content or links. <footer>-information about copyright, privacy policy, terms of use, etc. *you may not need some of these elements, depending on your page structure.
Describe the structure of a simple html document ( you may draw or describe by word of mouth)
Document declaration tag (<!DOCTYPE html>) <html> <head> Document header related tags </head> <body> Document body related tags </body> </html>
HTML 5-Content models
EMBEDDED =Content that imports other resources into the document(found in the head of the documentd):<audio, video, canvas, iframe, img,...>. INTERACTIVE =Content specifically intended for user interaction:<a, audio, video, button, img...> HEADING = Defines a section header: <h1, h2, h3, h4 ,h5, hgroup...> PHRASING =This model has a number of inline level elements in common with HTML4. *the same element can belong to more than one content model. seen in more details(https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories) FLOW = Content that contains the majority of HTML 5 elements that would be included in the regular/normal flow of the document:<a. audio, data, code, br, div, em...> SECTIONING content= Defines teh scope of heading, content, navigation, and footers. Elements:<article, aside, nav, sections> *The various content models overlap in certain areas, depending on how they are used.
Older Browsers.
For older browsers that don't support most of the modern tags and attributes in HTML, you could insert a simple <p>paragraph in between the modern tags that the older browser could read. <new html tag> <p>browser is old</p> </new html tag>
HTML colors
Html colors are written with the hexadecimal characters 0 to 9 and A to F (0 to F). There are 16 of them in total. Colors are displayed in a combination of red, green, and light blue*RGB, Hex values are written using the #symbol followed by either three or six hex characters. The characters go from 0 being the darkest to F being the lightest. Al of the possible RGB combinations potentially number over 16 million, here are a few of them: #FF0000=RED #00FF00=GRASS GREEN #0000FF=BLUE SCREEN BLUE #000000=BLACK #777777=GRAY #FFFFFF=WHITE The bgcolor attribute can be used to change a webpage's background color, it's input into the body tag : <body bgcolor="#000099">. The font color attribute is used to change the color of the font being used, it has its own element: <h1> <font color="#FFFFFF"> White headline </font> </h1> .
Definition of HTML
Html stands for Hyper Text Markup Language.<Hypertext (refers to the way in which Web pages (HTML documents) are linked together.) Thus, the link available on a webpage is called Hypertext.><As its name suggests, HTML is a Markup Language which means you use HTML to simply "mark-up" a text document with tags that tell a Web browser how to structure it to display>
Css
In the head of the document, you must enter the style tag to initiate css. In the <head> of the document, enter: <style type="text/css"> </style>:<head> <style type="text/css"> p{color:blue;font-family:arial;} </style> </head> <body> <p>This is normal text </p>: p=the selector(what you wanna change) color= A property (what you wanna change about it) blue=Value(What you wanna change it to).
<meta> tag
Provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
Cellpadding
Puts a pad of pixels between the contents of a cell and the cell wall. *an attribute of the <table>tag, input is measured in pixels.
Cellspacing
Puts space between the individual cells of the table(does not in anyway change the spacing between the cells and the cell wall). *an attribute of the <table> tag, input is measured in pixels only.
The form element: <form action="url" method="GET"> <form action="url" method="POST">
The method attribute specifies the HTTP method (GET or POST) to be used when forms are submitted (see below for description): When you use GET, the form data will be visible in the page address. Use POST if the form is updating data, or includes sensitive information (passwords). POST offers better security because the submitted data is not visible in the page address. another attribute of the form element is the submit button, which SUBMITS A FORM to its action attribute:(<input type="submit" value="Submit" /> ) After the form is submitted, the data is usually processed on a server using another processing language, preferably PHP.
<!DOCTYPE...(html in most cases)> **
This tag defines the document type and the html version, (put atop all other tags when creating an html document). 3types of doctype: Strict: you have to write the code properly. Transitional: less protocols to follow,
<html>
This tag encloses the complete HTML document, (placed right beneath the (doctype tag).It mainly comprises of document header which is represented by <head>... </head> and document body which is represented by <body>...</body> tags.
<p>
This tag represents a paragraph. Browsers automatically add an empty line before and after a paragraph.
The <nav> element <nav> <ul> <li><ahref="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">About us</a></li> </ul> </nav>
This tag represents a section of a page that links to other pages or to certain sections of the page, this would be a sort of section with navigation links: Not all of the links in a document should be inside a <nav> element. The <nav> element is intended only for major blocks of navigation links. Typically, the <footer> element often has a list of links that don't need to be in a <nav> element.
<head>
This tag represents the document's header which can house other HTML tags like <title>, <link>, etc.(html has 6 levels of heading tags) The head tag is used for holding Meta information, title, links, etc. and is not displayed on the page.
<h1>
This tag represents the heading ex( <h1> this is a heading </h1> (the browsers add one line before and after the heading> (not to be used for the sole purpose of getting different sized text).
<!--comment--> #Lorem Ipsum text- used as temporary text to fill up pages, paragraphs.
example of a comment tag. The words "tobla and bla" will not be displayed in the browser for they are perceived by the browser to be naught but comments. (ana is next to you btw, smack her when you reread this.)
Formatting Text
|<strong>/<b>|Changes the text between the tags to bold text, has and opening and closing tag. |<em>/<i>|(emphasis)Italics, puts text into italics, (text that's between the starting and ending tags.-same as bold tag). The tags are identical when seen on the webpage, what is different is the meaning behind the text. ie- when google looks through a webpage, the <strong/em> tags carry more value, for they are used not only to change the way the text looks, but also to make it label it as important. |<u>|underlines the selected text.(try to use as little as possible, because it causes confusions). |<big>/<small>| makes the text big/small.(not part of modern html, dangerous to use, better to not, for it probably won't show up on modern browsers.) |<mark>|Highlights text, default color is yellow. to change the color, "Css" is needed. |<sub>/<sup>| sub-subscript(moves the text up), as opposed to sup-superscript-moves the text up. |<ins><del>|Inserted text(shows that the word has been inserted). Deleted text(shows that the word has been deleted.*reddit does this.)