Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc mraymond@luminys.com

Transcription

1 Essential HTML & CSS for WordPress Mark Raymond Luminys, Inc

2 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.

3 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 text and content layout

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

5 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

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

7 HTML Tags: Images <img src= /wp-content/uploads/2013/10/mark-raymond.jpg /> Image tag elements: img Image tag src Source image URL or URI Let s digress and discuss URLs: Domain Name URI If you re referring to an image on the same domain, then use the URI

8 HTML Tags: Hyperlinks Hyperlinks link text to other websites: <a href= >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>

9 HTML Layout Tags: Tables <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> Avoid using tables for page layout Item Bananas Apples Cost $.058/lb $1.32/lb This table has no style, so simple black outline, no text justification Tags that compose a table: <table> <tr> </tr> <th> </th> <td> </td> Table tag Table row Table header Table cell You can put anything in a cell: text, images, etc.

10 Sidebar HTML Layout Tags: DIVs DIVs are used for page layout and contain HTML code that you can position on the page WordPress Page Header Your Content <div> <div> <div> Content <div> <div> Footer

11 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 brown fox Runs fast The quick brown fox runs fast. We used some inline CSS here: float left, right clear newline or carriage return

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

13 Let s Digress (again) and talk about color Binary Decimal Hex A B C D E F 16 colors can be represented as 0 F 16 * 16 = 0x0F * 0x0F = shades of color at 00 FF Colors on the web are represented as R(red) G (green) B (blue), with 256 shades of each color: #ffffff #rrggbb white # black # gray #ff0000 #00ff00 #0000ff red green blue

14 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)

15 Margin and Padding margin: 25px; Now is the time for all good men to come to the aid of the quick brown fox. padding: 25px; Now is the time for all good men to come to the aid of the quick brown fox.

16 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 over the log as he chased the rabbit through the forest, where upon he Unformatted, line height pushes text down 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);

17 Questions?

18 Questions?