html and css - thesaint-online.com and css.pdfwriting html and css (or indeed any code) requires a...
TRANSCRIPT
![Page 2: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/2.jpg)
In this talkAn introduction to HTML, the language of web development
Using HTML to create simple web pages
Styling web pages using CSS
Using HTML and CSS with WordPress posts
![Page 3: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/3.jpg)
HTMLHypertext Markup Language
![Page 4: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/4.jpg)
HTML is...A “markup language”
A way of structuring documents and describing their contents
A combination of plain text and special tags
A programming language - there is no way to “run” an HTML document. HTML doesn’t “do” anything
A way to style documents - that’s what CSS is for (more on this later)
HTML is not...
![Page 5: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/5.jpg)
HTML tagsAn HTML web page consists of sections of plain text surrounded by “tags”
The tags tell the web browser what each part of the page is
Different tags for headings, paragraphs, bold, italics, links, tables, lists, images...
![Page 6: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/6.jpg)
HTML tagsTags are represented using angle brackets
Open tags must be closed again using a /
<h1>This is a heading (level 1)</h1>
<p>This is a paragraph.</p>
<strong>This text would be bold.</strong>
<em>And this text would be italic.</em>
![Page 7: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/7.jpg)
HTML tagsTags can be nested, but be careful to close them in the right order
e.g. If you put an <em> tag inside a <p> tag, you must close the <em> tag again (with </em>) before you can close the outer <p> (with </p>)
<p>This is a paragraph. Inside this paragraph is <strong>bold text</strong>
and <em>italic text</em>.</p>
![Page 8: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/8.jpg)
Common HTML tags<h1>, <h2>, <h3>, <h4>, <h5> and <h6>
<p>, <span>, <strong> and <em> for text
<a> for hyperlinks (more on this shortly)
<img> for images
<ol>, <ul> and <li> for lists
<table>, <tr>, <td> and <th> for tables
<div> for splitting up a page into sections
There are many others
![Page 9: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/9.jpg)
HTML attributesSometimes a tag is not enough by itself - we might need to provide extra information
For example, we can use the <a> (anchor) tag for hyperlinks, but this isn't much good:
Check out <a>our website</a>.
How does the browser know which page to link to?
![Page 10: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/10.jpg)
HTML attributesSo we add an “attribute” to the tag
This consists of the attribute itself, an equals sign, and then the value of the attribute in quotes:
Check out <a href="http://example.com">our website</a>.
The href (hypertext reference) attribute tells the browser where the <a> hyperlink should lead. The value of the href attribute is the URL
![Page 11: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/11.jpg)
HTML attributesDifferent tags have different attributes. It wouldn't make sense to give an <em> tag an href attribute, for example
Not all tags have attributes. In fact, most don't (until we start using CSS)
Some tags can have multiple attributes. One is the <img> tag
![Page 12: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/12.jpg)
The <img> tagThe <img> tag has two required attributes:
src - the image's sourcealt - alternate text to show if the image cannot be displayed
<img src="picture.jpg" alt="A picture" />
<img src="picture2.jpg" alt="A picture" height="100" width="150" />
It also has optional height and width attributes (though it's better to use CSS)
![Page 13: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/13.jpg)
Building a simple web page
![Page 14: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/14.jpg)
The structure of a web page
Web pages (.html) begin with the <html> tag and end with the </html> tag
They must include a <head> section followed by a <body> section
The <head> is for meta information
Our content goes in the <body>
![Page 15: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/15.jpg)
The structure of a web page
<html><head><title>My first web page</title>
</head><body><h1>Welcome</h1><p>Hello world!</p>
</body></html>
page1.html
![Page 16: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/16.jpg)
A more complex page
page2.html
<html> <head> <title>My second web page</title> </head> <body>
<h1>Welcome</h1> <p>Hello world! This is some <strong>bold text</strong> and this is some <em>italic text</em>.</p>
<p>This is a picture:</p> <img src="logo.jpg" alt="The Saint's logo" />
<p><a href="http://google.com">This is a link to Google.</a></p>
![Page 17: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/17.jpg)
A more complex page
page2.html
<h2>Lists</h2>
<p>This is an ordered list:</p> <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>
<p>This is an unordered list:</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
</body></html>
![Page 18: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/18.jpg)
CSSCascading Style Sheets
![Page 19: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/19.jpg)
CSS
HTML only lets us describe a web page. It doesn't give us any control over the way a page looks
We use CSS “rules” to control the style of HTML elements
![Page 20: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/20.jpg)
CSS rulesCSS rules are written as a CSS property, a colon, and a value:
font-size: 10px
height: 300px
color: green
Different properties have different possible values. There are many different properties
![Page 21: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/21.jpg)
CSS rulesRules are applied to elements. This code would set the font size and line height for every <p> element in the page:
p {
font-size: 10px;
line-height: 12px;
}
The semi-colons separate the different rules
![Page 22: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/22.jpg)
CSS rulesCSS can be applied to HTML in different places
In a separate CSS stylesheet (.css file) - have to link to it from the HTML file:
<link rel="stylesheet" type="text/css" href="style.css" />
Inside <style> tags within the HTML document (normally in the <head>)
As a style attribute within an HTML tag
CSS rules applied “closer” to an HTML element (e.g. as an attribute) will override rules “further away” (e.g. in a stylesheet)
![Page 23: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/23.jpg)
CSS rules
As a style attribute:
p {
font-size: 10px;
line-height: 12px;
}
img {
height: 100px;
}
<style type="text/css">
p {
font-size: 10px;
line-height: 12px;
}
img {
height: 100px;
}
</style>
<p style="font-size: 10px; line-height: 12px;">
Stylesheets and <style> tags use the same syntax:
![Page 24: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/24.jpg)
CSS selectors
We don't always want to give every <p> element on the page the same style
To differentiate elements, CSS allows us to specify “classes” and “ids” which we assign as attributes
Smart use of classes and ids gives us powerful, fine-grained control over a document
![Page 25: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/25.jpg)
CSS ids
Ids should be unique within the page
Set CSS rules for elements with ids using #:
<p id="top">
p#top { font-family: Helvetica, Arial, sans-serif;}
Apply to HTML elements as an attribute:
![Page 26: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/26.jpg)
CSS classesApply to HTML elements as an attribute:
<p class="big">
p.big { font-size: 20px;}
Multiple elements can have the same class
Set CSS rules for elements with classes using a . :
![Page 27: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/27.jpg)
Putting it togetherp { font-size: 14px; font-family: Georgia, serif;}p#top { font-family: Helvetica, Arial, sans-serif;}p.big { font-size: 20px;}
page3.html
![Page 28: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/28.jpg)
Using HTML and CSS with WordPress posts
![Page 29: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/29.jpg)
Viewing post HTML
If the post only contains text, that's all you should see:
Access the HTML view of a WordPress post by clicking “Text”:
![Page 30: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/30.jpg)
Formatting postsIf the post also contains images, links or other formatting you'll see that too:
(<b> preceded <strong> and <i> preceded <em>. They still work most of the time, but you should use <strong> and <em> for accessibility reasons)
![Page 31: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/31.jpg)
Formatting postsIf you've ever copy-pasted an article into WordPress from Microsoft Word (or similar) and had weird formatting issues, try checking out the HTML view:
Copying text from Word often brings formatting along with it
You can fix this by pressing “Remove Formatting” or manually cleaning up the HTML
![Page 32: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/32.jpg)
Formatting postsBy the same token you can use HTML and CSS to get your posts looking the way you want them
WordPress gives you some tools for formatting, such as bold, italics, headings, links and lists
But for anything more advanced, custom code is required
![Page 33: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/33.jpg)
ExampleFor longer articles, it can make for a nicer user experience to include “Back to the top” links
At the top of the article, put in an empty anchor with an appropriate id attribute:
<a id="top"></a>
Throughout the article, put in hyperlinks to the top anchor
<a href="#top">Back to top</a>
The same principle can be applied, for example, to create a table of contents for an article
page4.html
![Page 34: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/34.jpg)
Resourceshttp://thesaint-online.com/classes/coding
Examples, exercises and these slides
Google: “html a”, “html ul”, “css font-size”, etc
W3Schools - usually the first result - is a good, quick reference guide
Lots of free guides on the internet
e.g. http://www.mediabistro.com/10000words/4-free-diy-coding-tutorials-for-the-online-journalist_b17374
![Page 35: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/35.jpg)
Exerciseshttp://thesaint-online.com/classes/coding/exercises
Writing HTML and CSS (or indeed any code) requires a text editor that handles plain text
NOT Microsoft Word
For Windows: Notepad, Notepad++
For Mac: Smultron, Textmate
I use Sublime Text 2, which is cross-platform
There are many others. Some free, some not
You can write and save .html and .css files on your local computer and just open them in your web browser
![Page 36: HTML and CSS - thesaint-online.com and CSS.pdfWriting HTML and CSS (or indeed any code) requires a text editor that handles plain text NOT Microsoft Word For Windows: Notepad, Notepad++](https://reader034.vdocuments.mx/reader034/viewer/2022052521/60a05a4cc4faa24925135bf0/html5/thumbnails/36.jpg)
Questions?