View
10
Download
0
Category
Preview:
Citation preview
HTML and CSSElliot Davies
April 10th, 2013
ed37@st-andrews.ac.uk
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
HTMLHypertext Markup Language
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...
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...
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>
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>
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
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?
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
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
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)
Building a simple web page
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>
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
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>
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>
CSSCascading Style Sheets
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
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
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
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)
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:
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
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:
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 . :
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
Using HTML and CSS with WordPress posts
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”:
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)
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
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
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
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
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
Questions?
Recommended