This document provides an introduction to web design and SEO topics including HTML, CSS, and resources. It explains that HTML is the underlying text format that web browsers understand, and provides examples of common HTML elements like paragraphs, links, images, and lists. It then discusses how CSS is used to style HTML elements by applying properties like font sizes, colors, and more. Layout examples are given using CSS and div elements. Finally, useful online resources for practicing HTML and CSS are referenced.
3. 1.HTML HTML = text format that web browsers ‘understand’. Basic concept: head and body: <html> <head><title>My Website</title></head> <body>Hello World</body> </html>
5. 1.HTML ~elements Some of the HTML elements are: <p> Paragraph</p> <a href=‘http://google.com’>Link</a> <div>Div(or box)</div> <imgsrc=“pic1.jpg” /> Unordered list: <ul> <li>list item</li> <li>list item</li> </ul> Headings: <h1>Heading</h1> <h2>Heading</h2> <h3>Heading</h3>
6. 1.HTML Here’s an example of an HTML document with some of those elements: Demo.html <html> <head> <title>My Webpage</title> </head> <body> <h1>Hello World</h1> <p>this is a paragraph</p> <a href=‘http://google.com’>link to Google</a> </body> </html>
8. 2. CSS CSS = cascading style sheets. CSS code is used to style HTML Example of CSS applied to a paragraph: <style> p { font-size: 50px; color: red; } </style> <p>This is a paragraph</p> Result: This is a paragraph
9. 2. CSS This is what an HTML with CSS document can look like: Demo.html <html> <head> <title>My Webpage</title> <style> p { font-size: 50px; color: red; } </style> </head> <body> <p>This is a paragraph</p> </body> </html>
11. 2. CSS Creating a layout using <div> tags. A web page layout is all about boxes. For example, A typical web page layout looks something like this: Header Main Content Sidebar Footer
12. 2. CSS Creating a single box in HTML using a <div>: <div> This is a div </div> If you add a unique name (id) to the <div>, then you can control its properties using CSS (height, width, background color, etc.): <div id=‘mydiv’>This is a div </div>
13. 2. CSS Adding a CSS rule to the div: <style> #mydiv { width:300px; height: 200px; background: green; } </style> <div id=‘mydiv’> This is a div </div>
14. 2. CSS The whole HTML document view: Demo.html <html> <head> <title>My Webpage</title> <style> #mydiv { width:300px; height: 200px; background: green;} </style> </head> <body> <div id=‘mydiv’> This is a div </div> </body> </html>
16. 3. Resources A very useful try-it-yourself website: http://www.w3schools.com/css/css_examples.asp Try one of these today: http://www.w3schools.com/css/tryit.asp?filename=trycss_default
