Webdesign

954 views
885 views

Published on

very basic intro to html & css

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
954
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Webdesign

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

×