Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


Intro to HTML

No description

Andy Warthol

on 31 January 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Intro to HTML

What is HTML? It's kinda like a container for content on the web. <div>stuff</div> opening tag HTML tags
have many attributes <img class="brand" src="img/logo.png" title="Practice Fusion" alt="Logo of Practice Fusion" /> closing tag Important attributes to know: title Displayed when mouse hovers over element
Used by search engines to understand the content
Can be used with other fancy stuff like JavaScript <img src="img/joni.jpg" title="Jonathan Michael, UI Engineer" alt="Photo of Jonathan Michael" /> HTML is comprised of "elements" <h1>Really important headline</h1> Let's talk about headlines Only one per page!
Usually displayed large
Important for SEO
Describes the content of page <h2>,<h3>,<h4>... Also used for headlines
Can appear multiple times on page
Also used for SEO
Cascade according to importance <h2>Important headline</h2>
<h3>Section headline</h3>
<h4>Sub-section headline</h4> The <p> element Also known as the paragraph tag Used for paragraphs of text
Great way to organize copy
Should always have a closing </p>
Usually has a bottom margin <p>Innovation takes courage. We encourage people not to be afraid of constantly raising their own standards, taking risks and leaving their comfort zone. Courage and ability to bounce back from failure is what got us here and will continue to define our company as a success.</p> It's for photos, graphics, etc. The <img> element The <ul> element Contains list item <li> elements
Vastly versatile
Andy's favorite element
Used for menubars and much more Also known as the unordered list <ul>
<li> List item 1 </li>
<li> List item 2 </li>
<li> List item 3 </li>
</ul> Also known as the div tag The <div> element The most common element
Has no innate look or feel
Heavily relies on CSS for instructions
It's pretty much just a container
Used to DIVide and organize content
MUST have a closing tag </div> <div id="logo">Practice Fusion</div> Also known as the "break" tag The <br/> element Used to force line breaks
Often abused to add extra space
Helpful for polishing copy display <p>Absolutely, your electronic medical records<br/>
are web-based, so you can log on anytime, anywhere.</p> Or HTML tag The <html> element All HTML goes between <html> and </html>
That's really all you need to know Or just "the head" The <head> element Occurs just after the opening <html> tag
Contains code that loads page assets
Stylesheet (CSS)
JavaScript files
Includes important SEO stuff that describes each page on your site
Includes stuff used for tracking
Or just "the body" All content lives between

That's it. The <body> element alt Used within the <img> element
Important for SEO
Should describe the image,
not just title it
Blind people need alt text <img src="img/joni.jpg" title="Jonathan Michael, UI Engineer"
alt="Photo of Jonathan Michael" /> src Relative path: Stands for "source"
Used for images and videos
Can point to a relative or absolute path
Loads content <img src="img/joni.jpg" /> Absolute path: <img src="http://www.someothersite.com/img/joni.jpg" /> {attributes are always contained by double quotes.} id Mostly used with JavaScript to do cool stuff
Can be used to style different elements
Can be used to jump to certain parts of a page
Two ID's should never be the same on a page
Almost every element can have an ID attribute <div id="logo">Practice Fusion</div> class Primarily used to style elements with CSS
Classes can pull in many different styles at once
Also used with JavaScript
Nearly every <div> utilizes classes <div class="container">
<div class="menubar">
</div> style Exclusively used to put CSS inside of an HTML element
Viewed as "janky" by developers
Can be useful for minor tweaks to an element
<a href="index.html" style="text-decoration: underline;">Link text</a> href Primarily used for hyperlinks
Also used to load stylesheets and favicons
Kinda like the SRC attribute <a href="index.html">link text</a> <link rel="stylesheet" href="css/style.css"> The "a" tag or "anchor" What are Tables? <a> Primarily used for hyperlinks
Is blue text by default
Often styled to look like a button
Can wrap around <img> elements
MUST be closed with a </a> tag <a href="http://www.bd.com">Visit BD</a> It's used to display stuff,
and usually has an opening and closing tag. The element is the first part of an HTML tag.
<element attr="value">content</element> Where do we use them? Tables <table> </table> <th>Name</th> <tbody> </tbody> <th>Phone</th> <th>Address</th> <td>text</td> <tr> <tr> <tr> <tr> <tr> </tr> </tr> </tr> </tr> </tr> Form Elements <form> <fieldset> <form> <label> <input> <button> Contains all form input fields
Must be closed by a </form> tag
Always has a Submit button A way to group similar form fields together <fieldset> <form>
<legend>Part 1</legend>
<label>First name</label>
<input type="text" placeholder="Your First Name">
<label>First name</label>
<input type="text" placeholder="Your First Name">
<button type="submit" class="btn">Submit</button>
</form> <legend> <legend> Just the title of a fieldset
No big deal <input> Form input fields
Radio buttons
Text field
Text areas (large txt fields) <select> <select> <select>
<option> Red </option>
<option> Yellow </option>
<option> Blue </option>
</select> HTML Best Practices Use HTML Comments <!-- Begin Menu Bar --> <!-- End of Menu Bar --> { Tons of code } Indentation
is your friend. <div class="outer">
<div class="inner">
Inner content
</div><!-- inner -->
</div><!-- outer --> Tool Philosophy It's not what you have, it's what you can do with what you have that matters.
Tool Philosophy It's much better to focus on understanding code than to focus on understanding a tool that writes code for you. Elements also have "attributes". <img src="img/logo.jpg" /> Self-closing, no closing tag needed
Uses "src" attribute to fetch data <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <form>
<legend>Part 1 of this form</legend>
<label>First name</label>
<input type="text" placeholder="Your First Name">
<label>First name</label>
<input type="text" placeholder="Your First Name">
<button type="submit" class="btn">Submit</button>
</form> Palabras?
Full transcript