learning html - ilead usa
TRANSCRIPT
![Page 1: Learning HTML - ILEAD USA](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5584484ed8b42adf748b4669/html5/thumbnails/1.jpg)
HTML
ILEAD USABrian Pichman
@bpichman
![Page 2: Learning HTML - ILEAD USA](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5584484ed8b42adf748b4669/html5/thumbnails/2.jpg)
![Page 3: Learning HTML - ILEAD USA](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5584484ed8b42adf748b4669/html5/thumbnails/3.jpg)
HTML = Hypertext Markup Language
• Displays web pages in a web browser. • Web browsers use the tags to interpret the
content of the page.• HTML elements consisting of tags enclosed in
angle brackets (e.g., <html>)• Tags most commonly come in pairs like <h1>
and </h1>
![Page 4: Learning HTML - ILEAD USA](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5584484ed8b42adf748b4669/html5/thumbnails/4.jpg)
Before we learn HTML…
• A “website” is a collection of “webpages”– A webpage is PAGENAME.HTML in an HTML site– Your home page should always be index.html• Technically www.yoursitename.com is actually
www.yoursitename.com/index.html
– Webpages are linked together through “hyperlinks”
• A website is stored on a server. – A Server has an IP Address (10.231.231.21) and a
DNS translates www.yoursitename.com to that Address
![Page 5: Learning HTML - ILEAD USA](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5584484ed8b42adf748b4669/html5/thumbnails/5.jpg)
This is typically at index.html
![Page 7: Learning HTML - ILEAD USA](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5584484ed8b42adf748b4669/html5/thumbnails/7.jpg)
What Does HTML Code Look Like?
![Page 9: Learning HTML - ILEAD USA](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5584484ed8b42adf748b4669/html5/thumbnails/9.jpg)
![Page 10: Learning HTML - ILEAD USA](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5584484ed8b42adf748b4669/html5/thumbnails/10.jpg)
<html><head><title>Learning Sites</title></head>
<body>The content of the document......</body>
</html>
The <html> element defines what the website is loading (whether it be an HTML site or PHP, etc)
Important: Save your home page as: index.html
![Page 11: Learning HTML - ILEAD USA](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5584484ed8b42adf748b4669/html5/thumbnails/11.jpg)
<html><head><title>Learning Sites</title></head>
<body>The content of the document......</body>
</html>
The <head> element must include a title for the document, and can include scripts, styles, meta information etc. It lets the browser know what to load
Scripts (Like JQUERY) are called in the “Head” Tag
![Page 12: Learning HTML - ILEAD USA](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5584484ed8b42adf748b4669/html5/thumbnails/12.jpg)
<html><head><title>Learning Sites</title></head>
<body>The content of the document......</body>
</html>
The <body> element must includes the content on the physical page. If you are using scripts, you can call the placement of the scripts in the body element.
Here is where most of the “actual coding” takes place
![Page 13: Learning HTML - ILEAD USA](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5584484ed8b42adf748b4669/html5/thumbnails/13.jpg)
Why is this important
• Learning the foundations of HTML (its syntax, code attributes, ordering of code) helps:– You read web code (people typically use
templates)– For Content Management Systems (Drupal,
Omeka, Word Press)
![Page 14: Learning HTML - ILEAD USA](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5584484ed8b42adf748b4669/html5/thumbnails/14.jpg)
Basic HTML Body Tags
Formatting Text Tagso <h1> Creates the largest headline/headingo <h6> Creates the smallest headline/headingo <b> or <strong>,Creates bold text / wordso <i> or <em> Creates italic text / wordso <font size="3"></font> Sets size of font, from 1 to 7o <font color="green"></font> Sets font color, using name or hex value
o <blockquote> Indents text from both sides
![Page 15: Learning HTML - ILEAD USA](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5584484ed8b42adf748b4669/html5/thumbnails/15.jpg)
Basic HTML Body Tags
Formatting Paragraphs Tagso <p>Creates a new paragraph
o <p align="left"> Aligns a paragraph to the left (default), right, or center.o <br> Inserts a line break
o <ol>Creates a numbered listo <ul>Creates a bulleted list
o <li>Precedes each list item, and adds a number or symbol depending upon the type of list selected
o <hr /> Inserts a horizontal ruleo <hr size="3" /> Sets size (height) of ruleo <hr width="80%" /> Sets width of rule, in percentage or absolute valueo <hr noshade /> Creates a rule without a shadow
![Page 16: Learning HTML - ILEAD USA](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5584484ed8b42adf748b4669/html5/thumbnails/16.jpg)
Media HTML TagsPicture Tagso <img src="name"> Adds an imageo <img src="name" align="left"> Aligns an image: left, right, center; bottom, top,
middleo <img src="name" border="1"> Sets size of border around an image
URL Tagso <a href="URL">NAME OF LINK</a> Creates a hyperlinko <a href="mailto:EMAIL">NAME OF LINK</a> Creates a mailto link
o <a href="#NAME"></a> Links to that target location from elsewhere in the document (Defining A Book Mark)o <a name="NAME"></a> Creates a target location within a document
![Page 17: Learning HTML - ILEAD USA](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5584484ed8b42adf748b4669/html5/thumbnails/17.jpg)
Basic Table TagsFormatting Paragraphs TagsTables• <table></table> Creates a table• <tr></tr> Sets off each row in a table• <td></td> Sets off each cell in a row• <th></th> Sets off the table header (a normal cell with bold, centered text)
Table Attributes• <table border="1"> Sets width of border around table cells• <table cellspacing="1"> Sets amount of space between table cells• <table cellpadding="1"> Sets amount of space between a cell’s border and its contents• <table width="500" or "80%"> Sets width of table, in pixels or as a percentage of document width• <tr align="left"> or <td align="left"> Sets alignment for cell(s) (left, center, or right)• <tr valign="top"> or <td valign="top"> Sets vertical alignment for cell(s) (top, middle, or bottom)• <td colspan="2"> Sets number of columns a cell should span (default=1)• <td rowspan="4"> Sets number of rows a cell should span (default=1)• <td nowrap> Prevents the lines within a cell from being broken to fit
![Page 18: Learning HTML - ILEAD USA](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5584484ed8b42adf748b4669/html5/thumbnails/18.jpg)
![Page 19: Learning HTML - ILEAD USA](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5584484ed8b42adf748b4669/html5/thumbnails/19.jpg)
![Page 20: Learning HTML - ILEAD USA](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5584484ed8b42adf748b4669/html5/thumbnails/20.jpg)
![Page 21: Learning HTML - ILEAD USA](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5584484ed8b42adf748b4669/html5/thumbnails/21.jpg)
![Page 22: Learning HTML - ILEAD USA](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5584484ed8b42adf748b4669/html5/thumbnails/22.jpg)
Not closing your tags (</TAG>) can ruin your site
![Page 23: Learning HTML - ILEAD USA](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5584484ed8b42adf748b4669/html5/thumbnails/23.jpg)
![Page 24: Learning HTML - ILEAD USA](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5584484ed8b42adf748b4669/html5/thumbnails/24.jpg)
![Page 25: Learning HTML - ILEAD USA](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5584484ed8b42adf748b4669/html5/thumbnails/25.jpg)
Practice Coding
http://www.codecademy.com/courses/html-one-o-one/0/1
![Page 26: Learning HTML - ILEAD USA](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5584484ed8b42adf748b4669/html5/thumbnails/26.jpg)
A Quick Bit About CSS
• CSS = Cascading Style Sheets– You can set what “Style” <h1> or <font=1> should
be instead of the default sizes / colors. – It can also set the layout of the site, backgrounds,
different regions (called <div>’s)– CSS are basically your “template design”
• There are free webpage templates available. Google “FREE HTML WEB TEMPLATES”
![Page 27: Learning HTML - ILEAD USA](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5584484ed8b42adf748b4669/html5/thumbnails/27.jpg)
![Page 28: Learning HTML - ILEAD USA](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5584484ed8b42adf748b4669/html5/thumbnails/28.jpg)
![Page 29: Learning HTML - ILEAD USA](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5584484ed8b42adf748b4669/html5/thumbnails/29.jpg)
What’s HTML5
• HTML5 is the latest version of HTML. It– Removes the need for flash objects– Uses “responsive design”– Makes using CSS easier; predefined elements
![Page 30: Learning HTML - ILEAD USA](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5584484ed8b42adf748b4669/html5/thumbnails/30.jpg)
![Page 31: Learning HTML - ILEAD USA](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5584484ed8b42adf748b4669/html5/thumbnails/31.jpg)
You Mentioned Scripts?
• Check out “DynamicDrive.Com”
http://www.dynamicdrive.com/dynamicindex10/matrixeffect.htm#.UjpxXMbbN8E
![Page 32: Learning HTML - ILEAD USA](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5584484ed8b42adf748b4669/html5/thumbnails/32.jpg)
Live Demos