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 - The Basics

No description
by

Aram Zucker-Scharff

on 3 October 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of HTML - The Basics

HTML - The Basics
Tags
#unique-name {
background-color:red;
border: 1px solid black;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin: 6px 6px 6px 6px;
float: left;
}
<html><body>
<div class="a-class" id="unique-name" style="
background-color:red;
">


<a href="a.html" target="_blank" title="">


<img src="img.jpg" title="HTML has easy ways to place images."


alt="An image." width="300px" height="300px" />


</a>
</div>
</body></html>
Tables
<table>
<tr>
<th colspan="2">
2 Column Header
</th>
<th rowspan="3" width="50px">
3 Row Header
</th>
</tr>
<tr>
<td valign="top" style="text-align:right;">
Element
</td>

<td height="26px">
Another element
</td>

</tr>
</table>
<header>
HTML5 Structure
</header>
<section>

<h1>
Forest elephants
</h1>

<aside>

<h1>
Sidebar
</h1>
<p>In this section, we discuss the lesser known forest elephants</p>

</aside>

<section>

<h2>
Introduction
</h2>
<p>Forest elephants do not live in trees but among them. Let's
look what scientists are saying in "
<cite>
The Forest Elephant in Borneo
</cite>
":</p>

<blockquote>

<h1>
Borneo
</h1>
<p>The forest element lives in Borneo...</p>

</blockquote>

</section>
</section>
Questions

&

Try it out.
The Box Model
Try it out, start easy.
Tools:
Brackets.io
Notepad++
Sublime Text (Mac)
<div id="primary" class="content-area">
<div id="slider" class="slider home flexslider">
<ul class="slides">
<li class="red">
<a href="http://ww2.cfo.com/capital-markets/2013/08/ipo-window-rarely-closes-report/" class="clickable">
<div class="image">
<img width="377" height="228" src="http://cdn.cfo.com/content/uploads/2013/08/13Aug_BB_IPO1.png" class="attachment-featured-article wp-post-image" alt="The time of year is not as important to public offerings as one might think." title="The IPO Window Rarely Closes" /> </div>
<div class="content">
<span class="topic">Capital Markets</span>
<h1 class="title">IPO Window Rarely Closes: Report</h1>
<p>Investment bankers often tell clients that only certain times of the year are conducive to...</p>
</div>
</a>
</li>
<li class="black">
<a href="http://ww2.cfo.com/budgeting/2013/08/new-strategies-around-strategy/" class="clickable">
<div class="image">
<img width="377" height="228" src="http://cdn.cfo.com/content/uploads/2013/08/strategystrategy1-377x228.png" class="attachment-featured-article wp-post-image" alt="What&#039;s next when a five year plan isn&#039;t enough?" title="What&#039;s next when a five year plan isn&#039;t enough?" /> </div>
<div class="content">
<span class="topic">Budgeting</span>
<h1 class="title">New Strategies Around Strategy</h1>
<p>The financial crisis turned traditional budgeting and strategic planning on its head. Now companies allow...</p>
</div>
</a>
</li>
.a-class
#unique-name
Where you're going.
http://ww2.cfo.com/technology
_blank
- New window.
_self
- This frame.
_parent
- This window or parent frame.
_top
- The highest level window available
The file.
Mouse-over (how it relates).
Image doesn't load (description).
Sizing overrides.
Span columns
Span rows
Align to
top
,
bottom
or
center
. Also: style="vertical-align: bottom;"
Connected Hierarchy
Padding
Border
Margin
Part of width and height
Not part of size values.
Reference
:
http://www.w3schools.com/
http://docs.webplatform.org/wiki/Main_Page
http://stackexchange.com/
This:
http://aramzs.me/bg
Full transcript