HTML and CSS. Elliot Davies. April 10th,

Size: px

Start display at page:

Download "HTML and CSS. Elliot Davies. April 10th, 2013. ed37@st-andrews.ac.uk"

Imogen Hampton
8 years ago
Views:

1 HTML and CSS Elliot Davies April 10th, 2013

2 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

3 HTML Hypertext Markup Language

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

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

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

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

8 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

9 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?

10 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=" 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

11 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

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

13 Building a simple web page

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

15 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

16 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=" is a link to Google.</a></p> page2.html

17 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

18 CSS Cascading Style Sheets

19 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

20 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

21 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

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

23 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;">

24 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

25 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;

26 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; }

27 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

28 Using HTML and CSS with WordPress posts

29 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:

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

31 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

32 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

33 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

34 Resources 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. free-diy-coding-tutorials-for-the-onlinejournalist_b17374

35 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

36 Questions?

Contents. Downloading the Data Files... 2. Centering Page Elements... 6

Contents. Downloading the Data Files... 2. Centering Page Elements... 6 Creating a Web Page Using HTML Part 1: Creating the Basic Structure of the Web Site INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Winter 2010 Contents Introduction...