crash course web - html presentation
TRANSCRIPT
HTML
What is HTML?
HTML stands for Hypertext Markup Language
Syntax
Tags define the elements/components of
our HTML document. They are enclosed in the angle
brackets, < and >.
<p>HTML is awesome!</p>
In the above code, <p> is an opening tag and </p> is a closing tag.
Syntax
<p>HTML is awesome!</p>
Opening Tag Closing TagContent
p stands for paragraph
will be displayed in the paragraphmarks the start of the element marks the end of the element
Creating an HTML file
<p>HTML is awesome!</p>
1. Open a plain text editor (Notepad, vim, etc.). 2. Type the code below to the editor. 3. Save as awesome.html. 4. Open file with your favorite web browser.
awesome.html
Syntax
<a href=“http://google.com”>Google</p>
Attributehref here is an attribute.
Attributes are extra properties of an element.
Syntax
<img src=“image.jpg” />
Self-enclosing tagimg is an example of a self-closing tag.
These tags do not have closing tags.
Block vs Inline
Examplesp (paragraph) h1-h6 (headings) div (division)
blockquote (quote)ul (unordered list) ol (ordered list)
Block Elements are elements that define a block of content, hence block.
The fill the whole width of their parent.
Block vs Inline
Examplesa (links) em (emphasis/italic) strong (emphasis/bold)
img (image)button (button) input (form input)
Inline Elements are elements that are inside block elements.
They only occupy the space they have to.
Hierarchy
Nesting Elements can contain other
elements.
<p> HTML is <em>awesome!</em> </p>
Correct!
Hierarchy
Nesting Elements can contain other
elements.
<p> HTML is <em>awesome!</p> </em>
Wrong!
Semantics
HTML is all about the content and meaning of a page. Do not be concerned with how your page looks yet.
Semantics
Examplesheader (first part of the page) h1 (title of the page) nav (page navigation)
section (a page section)article (main content) footer (last part of a page)
Structure Elements these elements allow you to organize your page.
Semantics
Examplesp (paragraph) ul (unordered list) ol (ordered list)
blockquote (a quote)li (item in a list)
Text Elements these elements define the purpose of your text.
Semantics
Examples
div (division) span (a span of text)
Generic Elements these elements are used to group elements.
they are usually used for styling.
Valid HTML
valid.html
<!DOCTYPE html> <html> <head> <meta charset=“utf-8"> <title>Title</title> </head> <body> <p>HTML is awesome!</p>
</body> </html>
HTML Lists
<ul> <li>HTML</li> <li>CSS</li> <li>JS</li> </ul>
unordered.html
There are two types of lists: unordered lists and order lists.
<ol> <li>Learn HTML</li> <li>Build Sites</li> <li>Profit!</li> </ol>
ordered.html
HTML Tablestables.html
<table> <thead> <tr> <th>Title</th> <th>Author</th> </tr> </thead> <tbody> <tr>
<td>Outliers</td> <td>M. Gladwell</td> </tr> </tbody> </table>
HTML Form
tables.html
<form> <input type=“text” placeholder=“Name” /> <input type=“email” placeholder=“Email” /> <input type=“password” placeholder=“Password” /> <input type=“submit" /> </form>
Resources
Marksheethttp://marksheet.io
W3Schoolshttp://w3schools.com