Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

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.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

HTML

No description
by

Natalia Lathrop

on 11 February 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of 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
<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
Should always have a closing </p>
<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
Like using bullet points
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 overused 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 body"
All content lives between
<body>
&
</body>
That's it.
The <body> element
alt
Used within the <img> element
Important for SEO
Should describe the image,
Not just title it
<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.}
CSS
Cascading Style Sheets
Used to edit the format of a web page, such as color, font, and size of text.
Attribute used: style
<p
style="font-size:20px;"
>
</p>
<p
style="font-family:ariel;"
>
</p>
style
Exclusively used to put CSS inside of an HTML element
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>

<fieldset>
<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>

</fieldset>
</form>
<legend>
<legend>
Just the title of a fieldset
No big deal
<input>
Form input fields
Checkboxes
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"
>
<h3>
Headline
</h3>
<div
class="inner"
>
Inner content
</div><!--
inner
-->
</div><!--
outer
-->
OTHER TUTORIALS
Elements also have
"attributes"
.
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>
<fieldset>

<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>
</fieldset>
</form>
¿PREGUNTAS?
HTML is a language for describing web pages.
HTML stands for
Hyper Text Markup Language
HTML is a
markup
language
A markup language is a set of markup
tags
The tags describe document content
HTML documents contain HTML
tags
and plain
text
HTML documents are also called
web pages
Only one per page!
Usually displayed large
Important for SEO (Search Engine Optimization)
Describes the content of page
<img
src="img/logo.jpg"
/>
Attribute changes text
Used to pass data
http://www.htmldog.com/guides/html/beginner/
http://www.davesite.com/webstation/html/
http://www.quackit.com/html/tutorial/
http://www.tizag.com/beginnerT/
http://www.easyhtmlcode.com/
http://aqeel.8m.net/
http://www.codeproject.com/Articles/775/HTML-For-Beginners
Week 1
- Go over last week information
- Working with Images
- Creating Links
<html> </html>
<head> </head>
<title> </title>
<body> </body>
<p> </p>
<h1> </h1>
<div> </div>
<em> </em>

Images
Main factors of Web images:
- Format
- Color
- Size/Resolution
- Speed
- Transparency
- Animation
Format
- .bmp
- .gif
- .jpg
- .png
- .svg
(Graphics Interchange Format). This makes the GIF format suitable for storing graphics with relatively few colors such as simple diagrams, shapes, logos and cartoon style images. The GIF format supports animation and is still widely used to provide image animation effects. It also uses a lossless compression that is more effective when large areas have a single color.
.gif
(Joint Photographic Experts Group) is a compression method; JPEG-compressed images are usually stored in the JFIF (JPEG File Interchange Format) file format. JPEG compression is (in most cases) lossy compression.
.jpg
For most of the Web surfing this days public use 24 or 32 bit monitors. This trend called "True Color".
Use RGB mode
Color
(Portable Network Graphics) file format was created as the free, open-source successor to GIF. Compared to JPEG, PNG excels when the image has large, uniformly colored areas. PNG is designed to work well in online viewing applications like web browsers so it is fully streamable with a progressive display option. PNG is robust, providing both full file integrity checking and simple detection of common transmission errors. Also, PNG can store gamma and chromaticity data for improved color matching on heterogeneous platforms.
.png
- Digital image are measured in pixels

- Image size depend on visitor's monitor's resolution (from 72ppi up to 100ppi)

- Standard Monitor size 1024x768

- Higher the resolution the more pixels
Size and Resolution
- Keep download time to minimum by using smaller images
Speed
Transparency
- Use GIF or PNG formats
Animation
- Use GIF or Flash
- Google,
- CDs
- Stock Photography Websites
- Personal Art
- Scanners and Digigal Cameras
Getting Images
Image Editors
- Many on the market
- border="n"
- align="left | right | middle | top | bottom"
- alt=" "
- title=" "
- width=" " height=" "
- clear=" "
- hspace= " " vspace=" "
Image Attributes
Rulers Attributes
<hr />
Attributes: size=" ", width=" ", align="left | right |center", noshade
<head>
<link rel="icon" href="foto.ico" type="image/x-icon" />
<link rel="shortcut icon" href="foto.ico" type="image/x-icon" />
</head>
Icon
To Web Page:
<a href="http://www.page.html>Label Text</a>

Anchors
<a href="#Intro">Introduction</a>
<a name="intro">Introduction</a>
Links
(Bitmaps) are a Microsoft Windows file format. Usually uncompressed and support 16.7 million colors, good for displaying photos, but quite large, better use other formats.
.bmp
(Scalable Vector Graphics) this is vector graphics format allowing you to create graphics using markup similar to HTML. This type of format can draw very small, crisp diagrams, can support animation, text, video and more. Can be styled using CSS and JavaScript.
.svg
Full transcript