Embed Size (px)
Citation preview
18 People Surveyed
6
6
5
1
HTML
Little to No
Worked With Before
Several Times
Master
18 People Surveyed
114
3
CSS
Little to No
Worked With Before
Several Times
Master
18 People Surveyed
105
3
JavaScript
Little to No
Worked With Before
Several Times
Master
HTML (HyperText Markup Language)
• HTML “tags”<html> </html>
• Describes structure
• Building blocks
• Headings, paragraphs, lists, links, images, quotes, etc.
<html> <head> <title>Page title</title> </head>
<body> <h1>This is a heading.</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body></html>
Basic HTML Tags
• Links<a href=“http://www.google.com”>CLICK HERE!</a>
• Images<img src=“http://www.google.com/images/srpr/logo11w.png”>
• Lists<ul> or <ol> <li>First item in the list</li> <li>Second item in the list</li></ul> or </ol>
• HTML Forms
• HTML5– New elements• Header, footer
– API’s• Geolocation• Drag and drop
Going Further
• Describes style and layout– How HTML elements will be displayed
• Multiple web pages– Saves time/work
• Inline or in CSS file
CSS (Cascading Style Sheets)
• Selector and declaration blockh1 {
color: red;font-size: 12px;text-align: center;
}
• Class or id selectors#main-title {
text-align: center;}
CSS
<html> <head>
<link type="text/css“rel="stylesheet“href=“path_to_css_file"/>
<title>Pagetitle</title>
</head>
<body> <h1>This is a
heading.</h1> <p>This is a
paragraph.</p> <p id=“demo”>This is
anotherparagraph.</p>
</body></html>
h1 {color: purple;text-align: center;
}
p {font-family: Verdana;
}
#demo {font-size: 36px;
}
• Backgrounds• Fonts• Tables• Outlines• Margins• Dimensions• Floating• .... and so much more!
CSS
• Programming language of the web– Similar to what you already know
• Gives a page functionality
• Can change HTML content and CSS styles
• In the HTML document or in .js file
JavaScript
• Change HTML content– Click here
• Strings– Click here
JavaScript Examples
• Math– Click here
• Dates– Click here
• Log onto a lab machine and go to:/web/home/your_username/public_html
• Create a file: index.html– Minimum: Put any bit of HTML– Extra: Add CSS– DOUBLE EXTRA: Add JavaScript
• Change the permissions to be seen on the web– chmod 644– people.cs.clemson.edu/~your_username
HOMEWORK
• www.w3schools.com
• www.codecademy.com
Resources
