Empfohlen
Weitere Àhnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Ăhnlich wie Web Design & SEO Workshop Guide
Ăhnlich wie Web Design & SEO Workshop Guide (20)
KĂŒrzlich hochgeladen
KĂŒrzlich hochgeladen (20)
Web Design & SEO Workshop Guide
- 1. Web Design & SEO Welcome to The Web Design & SEO Workshop!
- 2. Web Design & SEO ~ Topics HTML CSS Resources
- 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>
- 4. 1.HTML Result in Browser:
- 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>
- 7. 1.HTML Browser view of demo.html file:
- 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>
- 10. 2. CSS Browser view of demo.html file:
- 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>
- 15. 2. CSS Browser view of demo.html file:
- 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