INTRO TO WEB DEVELOPMENT html

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>

Tell the browser to start reading the code….. <!DOCTYPE html> <HTML> </HTML> Every HTML file will have <HTML> and </HTML>

Identify the Header part of the document….. <!DOCTYPE html> <HTML> <HEAD> </HEAD> </HTML> This is where information about the file is stored

Identify the Body of the document….. <!DOCTYPE html> <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> This is the main part of the file

Your HTML file is set up, but is still blank! <!DOCTYPE html> <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>

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>

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>

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?

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

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:

Quick review

Tell the browser what language to read….. <!DOCTYPE html> Every HTML file starts with <!DOCTYPE html>

Tell the browser to start reading the code….. <!DOCTYPE html> <HTML> </HTML> Every HTML file will have <HTML> and </HTML>

Identify the Header part of the document….. <!DOCTYPE html> <HTML> <HEAD> </HEAD> </HTML> This is where information about the file is stored

Identify the Body of the document….. <!DOCTYPE html> <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>

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=“ 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= 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=“ link to my url </a> Picture: <img src=“ /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

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>

INTRO TO WEB DEVELOPMENT html

Similar presentations

Presentation on theme: "INTRO TO WEB DEVELOPMENT html"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

INTRO TO WEB DEVELOPMENT html

Similar presentations

Presentation on theme: "INTRO TO WEB DEVELOPMENT html"— Presentation transcript:

Similar presentations

About project

Feedback