HTML and CSS Elliot Davies ed37@st-andrews.ac.uk April 10th, 2013
In this talk An 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
HTML Hypertext Markup Language
HTML is... HTML is not... 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 tags An 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 tags Tags 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 tags Tags 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 attributes Sometimes 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 attributes So 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 attributes Different 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> tag The <img> tag has two required attributes: src - the image's source alt - alternate text to show if the image cannot be displayed <img src="picture.jpg" alt="a picture" /> It also has optional height and width attributes (though it's better to use CSS) <img src="picture2.jpg" alt="a picture" height="100" width="150" />
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 <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> page2.html
A more complex page <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> page2.html
CSS Cascading 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 rules CSS 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 rules Rules 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 rules CSS 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)
p { font-size: 10px; line-height: 12px; } img { height: 100px; } CSS rules Stylesheets and <style> tags use the same syntax: As a style attribute: <style type="text/css"> p { font-size: 10px; line-height: 12px; } img { height: 100px; } </style> <p style="font-size: 10px; line-height: 12px;">
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 Apply to HTML elements as an attribute: <p id="top"> Ids should be unique within the page Set CSS rules for elements with ids using #: p#top { } font-family: Helvetica, Arial, sans-serif;
CSS classes Apply to HTML elements as an attribute: <p class="big"> Multiple elements can have the same class Set CSS rules for elements with classes using a. : p.big { font-size: 20px; }
Putting it together p { 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 Access the HTML view of a WordPress post by clicking Text : If the post only contains text, that's all you should see:
Formatting posts If 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 posts If 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 posts By 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
Example For 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
Resources http://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-onlinejournalist_b17374
Exercises http://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?