Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Lesson Plan For week 1

Lesson Plan For week 1

It for Learning Basics Mostly

Avatar for Adenekan Wonderful

Adenekan Wonderful

April 25, 2018
Tweet

More Decks by Adenekan Wonderful

Other Decks in Programming

Transcript

  1. Learning The Basis Of HTML & CSS May 5 ,

    2017 By Adenekan Wonderful
  2. HTML How It Works What is HTML? HTML is the

    standard markup language for creating Web pages. • HTML stands for Hyper Text Markup Language • HTML describes the structure of Web pages using markup • HTML elements are the building blocks of HTML pages • HTML elements are represented by tags • HTML tags label pieces of content such as "heading", "paragraph", "table", and so on • Browsers do not display the HTML tags, but use them to render the content of the page • The <!DOCTYPE html> declaration defines this document to be HTML5 • The <html> element is the root element of an HTML page • The <head> element contains meta information about the document • The <title> element specifies a title for the document • The <body> element contains the visible page content • The <h1> element defines a large heading • The <p> element defines a paragraph
  3. HTML Lets Refresh Our Memories <tagname>Content goes here...</tagname> <!DOCTYPE html>

    <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> <a href=https://www.w3schools.com> <a href="https://www.w3schools.com"> Alt : Specifies an alternative text for an image, when the image cannot be displayed Disabled : Specifies that an input element should be disabled Href : Specifies the URL (web address) for a link Id : Specifies a unique id for an element Src : Specifies the URL (web address) for an image Style : Specifies an inline CSS style for an element Title : Specifies extra information about an element (displayed as a tool tip)
  4. CSS How It Works CSS is a language that describes

    the style of an HTML document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced. What is CSS? • CSS stands for Cascading Style Sheets • CSS describes how HTML elements are to be displayed on screen, paper, or in other media • CSS saves a lot of work. It can control the layout of multiple web pages all at once • External stylesheets are stored in CSS files
  5. CSS Lets Refresh Our Memories Internal Style Sheet <head> <style>

    body { background-color: linen;} h1 {color: maroon; margin-left: 40px;} </style> </head> Inline <h1 style="color:blue;margin-left:30px;">This is a heading</h1> Three Ways to Insert CSS There are three ways of inserting a style sheet: • External style sheet • Internal style sheet • Inline style External Style Sheet <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
  6. <!DOCTYPE html> <html> <head> <style> body { background-image: url("img_tree.png"); background-repeat:

    no-repeat; background-position: right top; margin-right: 200px; background-attachment: fixed; } </style> </head> <body> <h1>Hello World!</h1> <p>If you do not see any scrollbars, try to resize the browser window.</p> </body> </html> AN EXAMPLE WITH CSS BACKGROUNDS
  7. 1st Step HTML Learning The Basic 2nd Step Puting It

    To practice on Any Editor At least 3rd Step Css Learning The Basics 4th Step Putting it to work On an HTML file at Least 5th Step Using Framworks To Make Work Easy
  8. EDITOR How It Works CLASS ENGAGEMENT ? Who Can tell

    Me any type of editor That we Have What is an Editor? • An Editor Is Used to write our raw code so out browers can be able to comunicate with it • A Best Editor Makes Up to enjoy what we are doing with our own code any editor can do for It
  9. Notepad++ Sublime text Atom Coda TextMate Text Wrangler J Edit

    Areana VS code Ultra Edit 16 Popular Editor Coffee Cup BlueFish Brackets ATpads Komodo EDIT Kompozer & many More
  10. Homework BUILD SOME THING REALLY NICE WITH HTML AND CSS

    ONLY NEXT WEEK WE ARE GOING TO BOOTSTRAP