essential html & css for wordpress - luminys...essential html & css for wordpress mark...
TRANSCRIPT
HTML: Hypertext Markup Language
• HTML is a specification that defines how pages are created for the web.
<h1>Hello, World!</h1>
• CSS – Cascading Style Sheets – describes presentation (how things should look)
h1 {font-size: 34px; font-weight: bold; color: #ff0000;}
• Javascript – a program language in your web page run by the browser to respond to mouse events, handle form validation, dynamic content (e.g., stock ticker), and animation.
HTML
• A little HTML knowledge can go a long way
• Easy to switch between visual and text (html) mode in WordPress
• WordPress takes care of all the complexities, so that you only need to understand HTML for textand content layout
HTML Tags
• Tags are how we structure and display content
• Tags may contain content:<h1>Header 1 Text</h1>
• Some tags don’t contain content:<br />
<hr />
• All tags must be closed with a “/”
• Tags may contain parameters:<a href=“/about/”>About Us</a>
HTML Text Tags
• Headers<h1>Header 1 Text</h1> Header 1
<h2>Header 2 Text</h2> Header 2
<h3>Header 3 Text</h3> Header 3
• Paragraphs <p>The quick brown fox</p>
• The <span> tag is used to apply styles to text inside a paragraph<p>The quick <span style=‘color:#9a6b49;’>brown</span> fox</p>
Spacing and colors are applied automatically through CSS
HTML Text Tags: Bullets & Lists
OL tag: ordered (numbered) list
<ol>
<li>List option 1</li> 1. List option 1<li>List option 2</li> 2. List option 2<li>List option 3</li> 3. List option 3
</ol>
UL tag: unordered (bulleted) list
<ul>
<li>List option 1</li> List option 1<li>List option 2</li> List option 2<li>List option 3</li> List option 3
<ul>
HTML Tags: Images
<img src=”/wp-content/uploads/2013/10/mark-raymond.jpg”/>
Image tag elements: img Image tagsrc Source image URL or URI
Let’s digress and discuss URLs:
http://www.luminys.com/wp-content/updates/2013/10/mark-Raymond.jpg
Domain Name URI
If you’re referring to an image on the same domain, then use the URI
HTML Tags: Hyperlinks
Hyperlinks link text to other websites:
<a href=“http://www.luminys.com”>Go to the Luminys home page!</a>
Or to pages in your own website:
<a href=“/about/”>About Us</a>
And you can link images:
<a href=“/about/mark-raymond-bio/”>
<img src=“/wp-content/uploads/2013/10/mark-raymond.jpg” />
</a>
HTML Layout Tags: Tables
Avoid using tables for page layout
<table>
<tr>
<th>Item</th>
<th>Cost</th>
</tr>
<tr>
<td>Bananas</td>
<td>$0.58/lb</td>
</tr>
<tr>
<td>Apples</td>
<td>$1.32/lb</td>
</tr>
</table>
Item Cost
Bananas $.058/lb
Apples $1.32/lb
This table has no style, so simple black outline, no text justification
Tags that compose a table:
<table> Table tag
<tr>…</tr> Table row<th>…</th> Table header<td>…</td> Table cell
You can put anything in a cell: text, images, etc.
HTML Layout Tags: DIVs
DIVs are used for page layout and contain HTML code that you can position on the page
Header
WordPress Page
Sid
eb
ar
Content
Footer
Your Content
<div> <div> <div>
<div> <div>
HTML Layout: DIVs Example
<div style=‘float: left;width: 33%’>The brown fox</div>
<div style=‘float: left; width: 66%;’>Runs fast</div>
<div style=‘clear: both; width: 100%;’>
The quick brown fox runs fast.
</div>
The quick brown fox runs fast.
The brown fox Runs fast
We used some inline CSS here:float left, rightclear newline or carriage return
Cascading Style Sheets
• Lots of styles – color, size, fonts, outlines, margins and spacing, location on page, transparency…
• A single CSS files can be created with all your styles and included in all your HTML web page
• Your WordPress theme defines your styles
• Quality themes include an advance setting where you can add your own custom styles
• Inline styles are used inside of HTML tags:<span style=“color: #0000ff;”>Hello!</span>
Let’s Digress (again) and talk about color
• 16 colors can be represented as 0 – F
• 16 * 16 = 0x0F * 0x0F = 256
• 256 shades of color at 00 – FF
• Colors on the web are representedas R(red) G (green) B (blue), with 256 shades of each color:
#rrggbb
Binary Decimal Hex0000 0 00001 1 10010 2 20011 3 30100 4 40101 5 50110 6 60111 7 71000 8 81001 9 91010 10 A1011 11 B1100 12 C1101 13 D1110 14 E1111 15 F
#ffffff white
#000000 black
#888888 gray
#ff0000 red
#00ff00 green
#0000ff blue
Common CSS styles
color:#ffffff; element color in hex
width: 250px; element width in pixels
font-size: 2em; element size in pixels or em
text-align: center; text alignment
line-height: 28px; line spacing in pixels or em
font-weight: bold; font weight (bold, normal, light)
font-family: Arial; Times New Roman, Arial, etc.
background-color: #ff0000; element background color in hex
background-image: URI or image
border: 1px solid #00000; border (pixels, line style, color)
Margin and Padding
Now is the time for all good men to come to the aid of the quick brown fox. margin: 25px;
Now is the time for all good men to come to the aid of the quick brown fox. padding: 25px;
Making your page pixel perfect
Now is the time for all good men to come to the aid of the quick brown fox. The quick brown fox jumped
Unformatted, line heightpushes text down
over the log as he chased the rabbit through the forest, where upon he
Now is the time for all good men to come to the aid of the quick brown fox. The quick brown fox jumped over the log as he chased the rabbit through the
forest, where upon he tripped and fell and bonked his head.
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
or
padding: (15px 15px 15px 0);
Questions?
Questions?