Htmlcss1
- 1. HTML & CSS <Coding> </Websites> LESSON 1
- 2. So What does HTML & CSS DO? • HTML- Inputs all of the visual elements of a website. This can include: Text, Pictures, Videos, and Hyperlinks. • CSS- Stylizes the HTML elements including layout, colors, fonts, margins, and borders.
- 3. HTML/CSS Coding Languages • HyperText Markup Language. - Web browsers read HTML file and renders them into visible websites. CSS- Cascading Style Sheet. -Style sheet language used for describing the presentation of a document written in a markup language. (Makes the HTML not look boring. Tells our website how to look)
- 4. CSS Layout How we format our website layout/ add text boxes/ used for placement
- 5. So how do we get started? • First we create a folder with our First name, last name, and the word “website” • Everything on our website will be inside that folder. • The program we will use is called Komodo Edit 8 • Komodo Edit 8 is a text based web editor. What this means is that this program helps us when we code our website by filling in the blanks, keeping us organized, and showing us any possible mistakes specific to HTML and CSS code. • It’s like Microsoft Word for writing papers.
- 6. What happens after that? • We learn code! • Html code is characterized by these symbols <> </> • Notice how the slash is the only difference. The slash indicates that the code is finished. • We always need a beginning tag < > and closing tag < / > • < > begins the code < / > tells the browser when the code ends.
- 7. So what are some HTML codes? • <p> This tag lets use type text into our website </p> • This tag lets use type text into our website. • <h1> This text makes a title or header</h1> • This text makes a title or header • <h2> The bigger the number the smaller the title or header</h2> • The bigger the number the smaller the title or header.
- 8. More HTML code • Adding a picture or video! • < img src=pictures/JME1.jpg> • <img src=pictures/JME1.jpg width=20% height=20%> • <source src=videos/Commercial.mov>
- 9. The very first line of code • On every website is ….. <!DOCTYPE html> • The <!DOCTYPE> declaration must be the very first line of code in your HTML document. • This tells the browser which version of HTML we are coding in. • Currently we are on HTML 5 • So begin typing <!DOCTYPE html> on line 1
- 10. Second line of code! • The very next line (line 2) will begin our HTML document. This is where the browser starts to read our code. • The code is simply <html> • Unlike <DOCTYPE! Html> this code needs an opening and closing tag since the browser will eventually need to know when the end of our HTML document is. • We will worry about closing the <html> tag a little later
- 11. Third line of code! • The third line will always be your <head> tag • This tag groups all of our websites metadata • What this means is that all of the extra stuff we want to put in our website but cannot see in the body of our website goes here. • The extra stuff includes what the title of your Tab will be on each page, your css document, and any other plug ins you want.
- 12. Head tag • <head> • <title> will appear on your tab<title> • </head> • After closing the </head> tag you’re reading to begin start putting content onto your site! • We start by adding a <body> tag. In between the body tags is where we will build out website.
- 13. What your code should look like • <DOCTYPE! html> • <html> • <head> • <title> Appears on the tab<title> • </head> • <body> • …This is where we will code our website… • </body> • </html>