INTRO TO WEB DEVELOPMENT html
HTML Hyper Text Markup Language Describes the structure of web pages using markup language
HTML No HTML
HTML 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", etc. * Browsers do not display the HTML tags, but use them to render the content of the page
The <h1> tag and it’s ending tag </h1> tell the browser to display the text as Heading Level 1
HTML Tags <tag>content goes here...</tag> HTML tags normally come in pairs like <p> and </p> The first tag in a pair is the start tag, the second tag is the end tag The end tag is written like the start tag, but with a forward slash inserted before the tag name
Parts of an html file <!DOCTYPE html> <HTML> </HTML> Needed at the top of every file to tell the browser what language it is written in <HTML> </HTML> At the beginning and end of the file to mark the beginning and end of the code
Parts of an html file <HEAD> </HEAD> Marks the header of a file Contains more details about how the browser should read the file <BODY> </BODY> Marks the body of the file This is the main part of the file
Creating an html document Tell the browser what language to read….. <!DOCTYPE html> Every HTML file starts with <!DOCTYPE html>
Creating an html document Tell the browser to start reading the code….. <!DOCTYPE html> <HTML> </HTML> Every HTML file will have <HTML> and </HTML>
Creating an html document Identify the Header part of the document….. <!DOCTYPE html> <HTML> <HEAD> </HEAD> </HTML> This is where information about the file is stored
Creating an html document Identify the Body of the document….. <!DOCTYPE html> <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> This is the main part of the file
Creating an html document Your HTML file is set up, but is still blank! <!DOCTYPE html> <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>
Creating an html document Now we have text, but still not formatting………… <!DOCTYPE html> My test web page If I skipped a line and typed more here, the browser would not show the line I skipped. <HTML> <HEAD> </HEAD> <BODY> My test web page If I skipped a line and typed more here, the browser would not show the line I skipped. </BODY> </HTML>
Creating an html document Adding a single paragraph tag added a return after the first line…… <!DOCTYPE html> My test web page If I skipped a line and typed more here, the browser would not show the line I skipped. <HTML> <HEAD> </HEAD> <BODY> My test web page <p> If I skipped a line and typed more here, the browser would not show the line I skipped. </BODY> </HTML>
Creating an html document Adding another paragraph tag added another return after the first line… This is what we wanted <!DOCTYPE html> My test web page If I skipped a line and typed more here, the browser would not show the line I skipped. <HTML> <HEAD> </HEAD> <BODY> My test web page <p><p> If I skipped a line and typed more here, the browser would not show the line I skipped. </BODY> </HTML> What if I want the first line to be bigger text?
Creating an html document The <H1></H1> tags tell the browser to show the enclosed text in the heading 1 style…. <!DOCTYPE html> My test web page If I skipped a line and typed more here, the browser would not show the line I skipped. <HTML> <HEAD> </HEAD> <BODY> <H1>My test web page</H1> <p><p> If I skipped a line and typed more here, the browser would not show the line I skipped. </BODY> </HTML>
HTML Tags to format text <STRONG> bolds the text specified. <BR> A tag that inserts a line break immediately following this code. <p></p> Paragraph break <h1> to <h6> Defines HTML headings <i></i> Italicizes text specified <u></u> Underlines text specified
Create your html file HTML tags Blank HTML Document <STRONG> bolds the text specified. <BR> A tag that inserts a line break immediately following this code. <p> Paragraph break <h1> to <h6> Defines HTML headings <i></i> Italicizes text specified <u></u> Underlines text specified <!DOCTYPE html> <html> <head> </head> <body> </body> </html> Create your own HTML file in notepad - use the sample above to create your skeleton file Write 3 lines of text and use at least 3 HTML tags above to format your text File - Save As, enter a file name then add .html to the end of it and choose ‘all files’ from the ‘save as type’ dropdown. Set UTF-8 encoding (save as and choose UTF-8 from the dropdown to the left of the save button). Click save Turn in to Google Classroom
Adding a title to your html page <!DOCTYPE html> <html> <head> <title> Mrs. Story’s web page </title> </head> <body> </body> </html>
HTML page review 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
Formatting Code <head> </head> <body> <!DOCTYPE html> <html> <head> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
<!DOCTYPE html> <html> <head> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> Indenting lines makes your code easier to read and helps see matching beginning and end tags
NotePad++ Notepad++ highlights tags in blue
NotePad++ You can expand and minimize sections of code for easier reading Expand or Minimize a section
Styles https://www.w3schools.com/colors/colors_names.asp The background-color property defines the background color for an HTML element. <body style="background-color:powderblue;"> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> Background is now powder blue https://www.w3schools.com/colors/colors_names.asp
Styles The color property defines the text color for an HTML element: <h1 style="color:blue;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p>
Styles The font-family property defines the font to be used for an HTML element: <h1 style="font-family:verdana;">This is a heading</h1> <p style="font-family:courier;">This is a paragraph.</p>
Styles The text-align property defines the horizontal text alignment for an HTML element: <h1 style="text-align:center;">Centered Heading</h1> <p style="text-align:center;">Centered paragraph.</p>
To Do Open your Individual Web Page Add a background color Add a centered heading with colored text Add 1 paragraph about yourself – your favorite color, music you like, etc. <body style="background-color:powderblue;"> <h1 style="color:blue;">This is a heading</h1> <h1 style="font-family:verdana;">This is a heading</h1> <p style="font-family:courier;">This is a paragraph.</p> <h1 style="text-align:center;">Centered Heading</h1> Colors: https://www.w3schools.com/colors/colors_names.asp
Quick review
Creating an html document Tell the browser what language to read….. <!DOCTYPE html> Every HTML file starts with <!DOCTYPE html>
Creating an html document Tell the browser to start reading the code….. <!DOCTYPE html> <HTML> </HTML> Every HTML file will have <HTML> and </HTML>
Creating an html document Identify the Header part of the document….. <!DOCTYPE html> <HTML> <HEAD> </HEAD> </HTML> This is where information about the file is stored
Creating an html document Identify the Body of the document….. <!DOCTYPE html> <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>
Creating an html document Your HTML file is set up, but is still blank! <!DOCTYPE html> <HTML> <HEAD> <TITLE>My Title</TITLE> </HEAD> <BODY> Your text goes here </BODY> </HTML>
Links The url you want to link to <a href=“http://www.myurl.com"> link to my url </a> The url you want to link to The text you want displayed for the link
images The url of the image you want to display <img src=https://www.fcusd.org/fcusd.jpg alt=“picture from the zoo”> The url of the image you want to display
images The name of the image you want to display <img src=“mypicture.jpg“ alt=“cute picture”> The name of the image you want to display
LISTS - unordered My list of animals <ul> <li>cat</li> <li>dog</li> <li>bird</li> </ul> beginning of unordered list <li> indicates list item end of unordered list
LISTS - ordered My ordered list of animals <ol> <li>cat</li> <li>dog</li> <li>bird</li> </ol> beginning of ordered list <li> indicates list item end of ordered list
To Do Open your Individual Web Page Add a link Add a picture Add an unordered list Add an ordered list Turn in on Google Classroom Link: <a href=“http://www.myurl.com"> link to my url </a> Picture: <img src=“https://pbs.twimg.com/profile_images/ 260254525/FCUSD-Logo-Apr2007.JPG "> Unordered list: Ordered list: <ul> <ol> <li></li> <li></li> </ul> </ol>
CSS Cascading Style Sheets CSS describes how HTML elements are to be displayed on screen, paper, or in other media Can control the layout of multiple web pages at once
CSS Inline - by using the style attribute in HTML elements Internal - by using a <style> element in the <head> section External - by using an external CSS file *most common
CSS – inline Inline CSS <h1 style="color:blue;">This is a Blue Heading</h1> This is what we have done already
CSS Internal CSS used to define a style for a single HTML page. defined in the <head> section of an HTML page, within a <style> element:
CSS – internal <!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head>
CSS – internal <body> <h1>This is a heading</h1> <p>This is a paragraph</p> </body> </html>
to do Open your individual web page Move all formatting to the header Turn in on Google Classroom Due tomorrow, Friday 9/22 Internal CSS Example <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head>
DIV Designates a division (or section) of a web page Can assign styles to <div> tags There are different types of <div> tags <head></head> <footer></footer> <nav></nav> Easier to organize a page
<div> </div> <head> </head> <nav> </nav> <body> </body>
Nav Navigation – series of links that let you move around a web site Can be on the top, or either side of the page
Nav <nav> <a href="index.html">Home</a> <a href="page1.html">Link 1</a> </nav>
Nav Add a little style… <nav> <a href="index.html">Home</a> | <a href="page1.html">Link 1</a> </nav>
Nav Other options – use images for buttons, build menus, etc. For code to create these, search for html navigation bar <nav> <a href="index.html">Home</a> | <a href="page1.html">Link 1</a> | <a href="page2.html">Link 2</a> | <a href="page3.html">Link 3</a> </nav>
to do <nav> <a href="index.html">Home</a> | Open MySite index.html file Add a title in the header Add a header in the body Add navigation under the header Create page1 and page2 Add navigation to page1 and page2 (hint: you can copy all code from index.html Save all and test <nav> <a href="index.html">Home</a> | <a href="page1.html">Link 1</a> | <a href="page2.html">Link 2</a> </nav>