In January 2017 SYDCON was invited to attend the GEMS conference held at a local D155 high school, Prairie Ridge. The conference was held in order to excite and expose middle school girls to different opportunities in STEM. SYDCON was asked to teach a brief 20-minute session about software development. Naturally, we chose to focus our session around HTML and taught the young programmers the basics of how to create a simple static website. Below is the handout we created to pass out to the students.
1 Definitions
- HTML
- HyperText Markup Language : The authoring language used to create documents on the World Wide Web. HTML defines the structure and layout of a Web document by using a variety of tags and attributes.
- HyperText
- Text which contains links to other texts
- Markup Language
- A language that annotates text so that the computer can manipulate the text.
2 History
HTML was invented in 1980 by physicist Tim Berners-Lee while working at the European Organization for Nuclear Research (CERN). Tim came up with the idea because he wanted to make it easier for physicist around the world to collaborate and share their work (Bellis, 2014).
3 Why Learn HTML?
- HTML is the skeleton to every website and can easily be combined with the powerful programming languages such as JavaScript, PHP, Python, and Java to create your favorite websites.
- There is currently a clear gender gap in the industry. According to a survey administered by Stack Overflow in 2015 about 92 percent of programmers on the site are male(Stack Overflow, 2015).
- Most importantly, creating websites and developing software is a unique creative experience that you can share with friends, family, and others around the world. Even if you do not become a software developer, you will most likely have to learn how to program in any sort of STEM discipline.
4 Elements
HTML elements tell the browser what to do with the information
- <!doctype html> :: Lets the browser know the document is HTML5
- <html> :: The parent to all other elements.
- <head> :: Place extra information about the document under this element. • <title> :: Place the title of the document in this element
- <body> :: Everything visible on the page should be placed under this tag.
- <h1> :: Defines a large heading.
- <p> Defines a paragraph.
- <a> Defines a link.
5 Attributes
HTML attributes are used to give more information to the browser about elements. •
- href :: Add a link
- id :: Give an element a name
- src:: Addalinktoanimage
6 Rules
- Tags begin with the less than symbol and end with the greater than symbol and are used for HTML elements
- <head>, <p>
- All elements must be closed. Closing elements begin with a forward slash.
- <p> Here is some sample text </p>
- You must declare the document type as the first line in your document. This lets the browser know the file contains HTML.
- <!doctype html>
- Attributes must be placed in tags after the element.
- <a href= ‘www.google.com/ ‘>
- <p id=’paragraph1′>
7 Example Code
Below is a list of common HTML mistakes and how to fix them
- Invalid HTML
<!DOCTYPE html>
<html>
- Valid HTML
<!DOCTYPE html>
<html>
</html>
- Invalid HTML
<!DOCTYPE html>
<body>
<html>
</html>
- Valid HTML
<!DOCTYPE html>
<html>
<body>
</body>
</html>
- Invalid HTML
<DOCTYPE html>
<html>
<href=’www.google.com/’ a>Google</a>
</html>
- Valid HTML
<DOCTYPE html>
<html>
<a href=’www.google.com/’>Google</a>
</html>
- Basic HTML Template
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> This is a header </h1>
<p> This is a paragraph </p>
</body>
</html>
8 Helpful Resources
HTML
- https://www.tutorialspoint.com/html/
- https://www.w3.org/TR/WCAG20/
- https://www.w3schools.com/html/
- https://htmldog.com/guides/html/beginner/
Computer Science
- https://code.org/
- https://www.madewithcode.com/
- https://girlswhocode.com/
- https://www.khanacademy.org/
- https://www.girldevelopit.com/
- https://www.idtech.com/alexa-cafe/
9 Bibliography
- 1. Bellis, M. (2014, December 18). History of the Internet and Inventor Tim Berners-Lee. Retrieved February 17, 2017, from https://inventors.about.com/od/istartinventions/a/internet.htm
- 2. Stack Overflow Developer Survey 2015. (n.d.). Retrieved February 17, 2017, from https://stackoverflow.com/resea survey-2015
