HTML and CSS are used to build websites. HTML provides the content and structure, while CSS handles the styling and layout. Some key HTML elements include headings, paragraphs, images, and links. CSS can control colors, fonts, spacing and more. Websites are coded using tags like <p> for paragraphs and <h1> for main headings. The first lines of code in an HTML file are always <!DOCTYPE html> followed by <html> and <head> tags, with the <body> tag containing the visible page content.
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>