crash course web - html presentation
TRANSCRIPT
![Page 1: Crash Course Web - HTML Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062902/58eef69c1a28abd9408b45fb/html5/thumbnails/1.jpg)
HTML
![Page 2: Crash Course Web - HTML Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062902/58eef69c1a28abd9408b45fb/html5/thumbnails/2.jpg)
What is HTML?
HTML stands for Hypertext Markup Language
![Page 3: Crash Course Web - HTML Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062902/58eef69c1a28abd9408b45fb/html5/thumbnails/3.jpg)
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.
![Page 4: Crash Course Web - HTML Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062902/58eef69c1a28abd9408b45fb/html5/thumbnails/4.jpg)
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
![Page 5: Crash Course Web - HTML Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062902/58eef69c1a28abd9408b45fb/html5/thumbnails/5.jpg)
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
![Page 6: Crash Course Web - HTML Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062902/58eef69c1a28abd9408b45fb/html5/thumbnails/6.jpg)
Syntax
<a href=“http://google.com”>Google</p>
Attributehref here is an attribute.
Attributes are extra properties of an element.
![Page 7: Crash Course Web - HTML Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062902/58eef69c1a28abd9408b45fb/html5/thumbnails/7.jpg)
Syntax
<img src=“image.jpg” />
Self-enclosing tagimg is an example of a self-closing tag.
These tags do not have closing tags.
![Page 8: Crash Course Web - HTML Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062902/58eef69c1a28abd9408b45fb/html5/thumbnails/8.jpg)
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.
![Page 9: Crash Course Web - HTML Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062902/58eef69c1a28abd9408b45fb/html5/thumbnails/9.jpg)
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.
![Page 10: Crash Course Web - HTML Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062902/58eef69c1a28abd9408b45fb/html5/thumbnails/10.jpg)
Hierarchy
Nesting Elements can contain other
elements.
<p> HTML is <em>awesome!</em> </p>
Correct!
![Page 11: Crash Course Web - HTML Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062902/58eef69c1a28abd9408b45fb/html5/thumbnails/11.jpg)
Hierarchy
Nesting Elements can contain other
elements.
<p> HTML is <em>awesome!</p> </em>
Wrong!
![Page 12: Crash Course Web - HTML Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062902/58eef69c1a28abd9408b45fb/html5/thumbnails/12.jpg)
Semantics
HTML is all about the content and meaning of a page. Do not be concerned with how your page looks yet.
![Page 13: Crash Course Web - HTML Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062902/58eef69c1a28abd9408b45fb/html5/thumbnails/13.jpg)
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.
![Page 14: Crash Course Web - HTML Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062902/58eef69c1a28abd9408b45fb/html5/thumbnails/14.jpg)
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.
![Page 15: Crash Course Web - HTML Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062902/58eef69c1a28abd9408b45fb/html5/thumbnails/15.jpg)
Semantics
Examples
div (division) span (a span of text)
Generic Elements these elements are used to group elements.
they are usually used for styling.
![Page 16: Crash Course Web - HTML Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062902/58eef69c1a28abd9408b45fb/html5/thumbnails/16.jpg)
Valid HTML
valid.html
<!DOCTYPE html> <html> <head> <meta charset=“utf-8"> <title>Title</title> </head> <body> <p>HTML is awesome!</p>
</body> </html>
![Page 17: Crash Course Web - HTML Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062902/58eef69c1a28abd9408b45fb/html5/thumbnails/17.jpg)
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
![Page 18: Crash Course Web - HTML Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062902/58eef69c1a28abd9408b45fb/html5/thumbnails/18.jpg)
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>
![Page 19: Crash Course Web - HTML Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062902/58eef69c1a28abd9408b45fb/html5/thumbnails/19.jpg)
HTML Form
tables.html
<form> <input type=“text” placeholder=“Name” /> <input type=“email” placeholder=“Email” /> <input type=“password” placeholder=“Password” /> <input type=“submit" /> </form>
![Page 20: Crash Course Web - HTML Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062902/58eef69c1a28abd9408b45fb/html5/thumbnails/20.jpg)
Resources
Marksheethttp://marksheet.io
W3Schoolshttp://w3schools.com