• Save
Webdesign
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Webdesign

on

  • 1,017 views

very basic intro to html & css

very basic intro to html & css

Statistics

Views

Total Views
1,017
Views on SlideShare
1,015
Embed Views
2

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 2

http://myaiclass.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Webdesign Presentation Transcript

  • 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