diff --git a/IMC_WebDev/HTML Blog Final.docx b/IMC_WebDev/HTML Blog Final.docx new file mode 100644 index 0000000..2e9d895 Binary files /dev/null and b/IMC_WebDev/HTML Blog Final.docx differ diff --git a/IMC_WebDev/Introduction-to-HTML.md b/IMC_WebDev/Introduction-to-HTML.md new file mode 100644 index 0000000..45d9153 --- /dev/null +++ b/IMC_WebDev/Introduction-to-HTML.md @@ -0,0 +1,31 @@ +# TEMPLATE + +## :fire: Do not edit this file - copy the template and create your own file. + +**[Step-By-Step Technical Blog Guide](https://hq.bitproject.org/how-to-write-a-technical-blog/)** + +### :pushpin: Step 1 +**TITLE:** +Introduction to HTML + +**TOPIC:** +HTML + +**DESCRIPTION (5-7+ sentences):** +Participants will learn how to the basic functions of HTML work and why certain elements of HTML are useful for projects. The blog will provide a step by step tutorial on how to create a "mini city". This mini city will be comprised of buildings, cars, and a road. Through using the knowledge gained from the blog, the participant should be able to contstruct their own "mini city" with HTML and other combined languages such as CSS. The HTML segment of the tutorial lays out the basic foundation for the city. + +### :pushpin: Step 2 +:family: **TARGET AUDIENCE (3-5+ sentences):** +Middle - High school - Early college students who are not extremely familiar with HTML or the usage of HTML. Considering this project can be done by a beginner, this is the most suitable target audience. These students should have little to no background in code. + +### :pushpin: Step 3 +> Outline your learning/teaching structure: + +**Beginning (2-3+ sentences):** +The HTML blog will begin with a general introduction to the elements of HTML. The importance of using HTML as a foundation for the rest of the tutorial will be emphasized. + +**Middle (2-3+ sentences):** +The middle section of the steps should extremely specific and they should indeed hold the hand of the student as they are not familiar with HTML. Every step should have some form of documentation so that it makes sense. + +**End (2-3+ sentences):** +The end of the tutorial should wrap up all of the elements previously taught. There should be an explanation for WHY every step was necessary, so that the student truly understands rather than mindlessly copying. diff --git a/IMC_WebDev/MiniCityBlog.md b/IMC_WebDev/MiniCityBlog.md new file mode 100644 index 0000000..de83fae --- /dev/null +++ b/IMC_WebDev/MiniCityBlog.md @@ -0,0 +1,223 @@ +## Building a Mini City: HTML Portion +## Purpose +HTML and CSS are extremely important parts of learning about how websites work. Every website uses HTML in order to display things such as text or images on sites. Being able to grasp a few concepts of HTML and CSS can help a lot when it comes to learning more intricate subjects in computer science. For this reason, it is important to get some experience with it! + +This tutorial will give you a walkthrough on how certain functions of HTML work and why they are important, all while learning how to build a cool mini-city! + +## Setup +Open any HTML/CSS editor. [Here is a good browser-based editor](https://www.w3schools.com/tryit/tryit.asp?filename=tryhtml_default). +Follow along with this tutorial, and you will be one step closer to building your first mini-city! + +## Walkthrough + +This tutorial will go over the HTML and CSS portion of the mini-city. You can think of HTML as the foundation of the entire project! If we work to build a strong foundation, our mini-city will look fantastic! + +Our first step when using HTML is to establish a “!DOCTYPE html” function. This simply means that all of our code below this will be rendered as an HTML document. +So, your first line should look like this: +```html + + ``` + +Got it? Great! + +Next, we have to actually create our HTML tag. Tags are essentially commands that tell our editor what type of HTML we are writing. This just means that we are beginning to write our HTML code, but first we must actually tell our computer that we will be writing in HTML. To do this, simply type <html> on your second line. Your code should look like this so far: +```html + + + ``` + +Now that we have established the fact that we will be writing in HTML, it’s time to get into the fun stuff. We start by writing <head> in our third line of code. This tells our editor that the information for our header will be stored here. + +After we write our <head> tag, we know that we should give our project a title. Let’s title our project “My Mini City”. This is how your code should look now: +```html + + + + My Mini City + ``` + +You may notice that there is a </title> tag after our title’s name. This is called a closing tag. Closing tags have a “/” before they state which tag they are closing. This just tells our editor that we are no longer editing this tag. + +To create our body section, simply type body on your next line. + +Now, let’s make our classes! Let’s think about what we want our city to look like. +We know that we want the following objects in our city: +* The ground +* A skyscraper +* A smaller building +* A road +* A bridge +* An ocean +* A waterfall +* A car + +In order to eventually create these objects, we have to make classes for them. Classes are simply declarations that we use to establish the fact that we are going to create an object. Then, we actually create it in CSS! + +We create classes using the <div> tag. Like this: +```html + +
+ ``` +As you can see, we just created a class called “ground”. Now our editor knows that we are planning to create an object. + +We do the same thing with all of our other objects. When you are done, it should look something like this: +```html + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ +
+ +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+ +
+ + + +``` + + +This looks like a huge chunk of code right now, but let’s break it down! + +For every object in our city, we create a div class for it. That way, we can edit it using our CSS. HTML is just our canvas for all of our objects, while CSS is like our paint! + +Sometimes, objects have “children”. For example, since our buildings are placed on the ground, the buildings are “children” of the ground. +You can see that “building1” is placed within the “ground” tag in our code. + +Our “building1” also has children of its own. Since walls and a roof are components of our building, we place them inside our <building1> tag. We repeat this whenever components belong to each other. (You can also see this with the grass area and trees) + +After we create all of our objects and their “children”, it is time to close our body and our html tag by using /body and /html. + +When it’s time to design our objects in CSS, we MUST use the exact name we created for them in our HTML. For example, if I want to change the color of the bridge in my city, I need to name it “bridge” in my CSS, just like how it is in my HTML. + +Next, let’s prepare our editor for the CSS portion of the code. We do this by establishing a style tag. Since we will be using CSS, our style tag will look like this: +```html + + + + Mini City Webinar +