Skip to content

Instantly share code, notes, and snippets.

@techric

techric/Stage1WorkSession1.markdown

Created May 31, 2015 00:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save techric/59805bd1ed0e94976401 to your computer and use it in GitHub Desktop.
Save techric/59805bd1ed0e94976401 to your computer and use it in GitHub Desktop.
Download ZIP
Stage1WorkSession1
Raw
index.html
<!--Normally for HTML5, you would need to put "<!DOCTYPE HTML>" here, but Codepen doesn't require this.-->
<head>
<title>Techric's Notes for Udacity's Introduction to Programming Nanodegree</title>
</head>
<body>
<div class="TOC">
<!--- BEGIN TOC--->
<h1> Table of Contents</h1>
<ul>
<!-- The <ul> and <li> are used for lists that are NOT ordered. Whereas, <ol> and <li> tags are for ordered lists. They are automatically numbered by the software. Numbers are automatically generated by the code.-->
<li><a href="#Introduction"> Introduction</a></li>
<ul>
<li><a href="#Lesson 1"> Lesson 1</a></li>
<ul>
<li><a href="#Lesson 1-1"> 1-1. Tools for Learning HTML5</a></li>
<li><a href="#Lesson 1-2"> 1-2. Programmer Thinking</a></li>
<li><a href="#Lesson 1-3"> 1-3. The World Wide Web</a></li>
</ul>
<!--- END Lesson A-B List --->
</ul>
<!--- END Lesson List--->
</ul>
<!--- END Introduction List--->
</div>
<!-- END TOC -->
<div class="Lesson">
<!--- BEGIN: Tools to Help You Learn HTML5-->
<h2 id="Lesson 1-1"> Lesson 1-1. Tools for Learning HTML5 </h2>
<div class="concept" id="Lesson 1-1">
<div class="concept-title">
Tools for Learning HTML5
</div>
<!--- END "concept-title"--->
<div class="concept-description">
<p> In this section, I'll add tools such as websites, videos, and documents that can be used for reference purposes.
<ol>
<li> This is an "indy" website that is a really good reference for HTML5.You can find it at:
<a href="http://www.html-5-tutorial.com/"> www.html-5-tutorial.com</a></li>
<li>Codepen is a website that you can build your website on the fly. You can find it at:
<a href="http://www.codepen.io/"> www.codepen.io </a></li>
</ol>
</p>
<p>
</p>
</div>
<!--- END "concept" id="--->
</div>
<!--- END "concept title"--->
</div>
<!--- END: Tools to Help You Learn HTML5--->
<h2 id="Lesson 1-2" .><b> Lesson 1-2. Programmer Thinking: (5) Basic Ideas</b></h2>
<!--Begin: Lesson 1 "Thinking Like A Programmer Requires Five Basic Ideas".-->
<div class="concept" id="Lesson 1-2">
<div class="concept-title">
</div>
<div>
<p>
<ol>
<!-- <ol> and <li> tags are for ordered lists. Numbers will automatically generated by the code. This is in contrast to <ul> and <il> where the lists are NOT ordered and automatically numbered.-->
<li> Procedural Thinking -- Breaking a problem into basic steps </li>
<li> Abstract Thinking -- Generality amongst seemingly unrelated things </li>
<li> Systematic Debugging -- Finding and fixing coding errors in an orderly fashion </li>
<li> Technological Empathy -- Understanding what the computer is doing with your code </li>
<li> Systems Thinking -- Being able to break a large project into smaller pieces and logically solving problems in a stepwise fashion </li>
</ol>
<!-- End "Thinkng Like A Programmer Requires FIve Basic Ideas"-->
<!--- Begin: "Basics of the Web A Brief Overview" --->
</p>
</div>
<!--- END "concept" id="--->
</div>
<!--- END "concept title"--->
</div>
<!--- END: Tools to Help You Learn HTML5--->
<h2 id="Lesson 1-3"><b> Lesson 1-3. Basics of The Web: A Brief Overview</b></h2>
<ol>
<!-- BEGIN "Basics of The Web: A Brief Overivew" List-->
<li> The World Wide Web: A Collection of HTML Pages
<li> HTML - "Hypertext Markup Language"</li>
<li> URL - "Uniform Resource Locator"</li>
<li> HTTP - "Hyper Text Transfer Protocol"</li>
<li> Web Applications</li>
</ol>
<!-- END "Basics of The Web: A Brief Overivew" List-->
</div>
</div>
</div>
<!--- END Thinking like A Programmer --->
<div>
<!--- BEGIN: The World Wide Web --->
<h3> WWW: "The World Wide Web" </h3>
<p>The "web" is composed of several key components. The first is what you see as the user. You're using a computer. This computer has a "web browser" - the software you use to access the internet experience. If you're old enough, you might remember "Netscape"
which was esseentially the first modern web browser. We now use Apple's Safari, Google's Chrome, and many others to access the internet. </p>
<p>The next component is the "internet" itself. The internet is composed of computers called servers. These servers are usually in a nondescript building, stacked in "racks", and maintained by some really smart computer IT technicians. These computers
"host" the HTML web pages that we access every time we use browse the internet. <b>The key take away is that the web is a collection of web pages </b></p>
</div>
<!--- END: The World Wide Web --->
<div>
<!--- BEGIN: Hypertext Markup Language--->
<h3> HTML: "Hypertext Markup Language"</h3>
<p>
<ul>
<li> Text - Basically, refers to the data that you see in your web browser</li>
<li> Markup - Arrangement of the content</li>
<li> Hyperlinks - "Links" your current page to other pages and information sources.</li>
</p>
<p>HTML is made up of <b>"tags"</b>. These tags are used to form <b>"elements"</b>. Elements are used to infuence the behavior, look, and feel of web pages.</p>
<p>For example, a generic element might look liks this:
<br>
<br><b> &lttag&gt contents &lt/tag&gt </b>
<br>
<br> The &lttag&gt is the "opening tag"
<br> The &lt/tag&gt is the "closing tag" So if you want to display the words "Run like the wind!" using bold letters, you can use the bold &ltb&gt tags to create an element like so
<br>
<br><b>
&ltb&gtRun like the wind!&lt/b&gt </b>
<br>
<br> For the user, your HTML code will look like this: "<b>Run like the wind!</b>"
<br>
<br>
<h5><b> Anchor Tag</b></h5> Another HTML tag is the "anchor tag" denoted by "a". The anchor tag allows you to create links to other pages or data sources on the web. The pseudocode for an anchor tag looks like this:
<br>
<br><b>
&lta href = attribute &gt contents &lt/a&gt </b>
<br>
<br> In this example, the "href" stands for "hypertext reference".
<br>
<br> So let's say you wanted to create a hyperlink that would take you to <em>www.usatoday.com</em>. It would look something like the following.
<br>
<br><b>
&lta href = www.usatoday.com &gt usatoday.com &lt/a&gt </b>
<br>
<br>
<h5><b> Break Tag</b></h5> Not all elements use a closing tag. Tags that do not require a closing tag are called <b>void tags</b>. For example, the tag to create a line break or to push text to the next line on the page is called the "break" tag. The break tag is denoted
by "br". So, all you would need to write in the HTML5 code is the following.
<br>
<br>
<b>&lt br &gt </b>
<br> One last point about "br". The break tag is considered "inline" versus "block". The difference between the two will be discussed later in this lesson.
<h5><b> Image Tag</b></h5> The image "img" tag, only uses the opening tag plus a source attribute. This source reference is denoted by "src". The source is usually the location of the image file for its associated element. The element also needs to designate a value for
the source. This is noted below by "url". Hence, an image element might look something like this
<br>
<br>
<b>&lt img src = url &gt or &lt img src = alt &gt</b>
<br>
<br> where the "alt" corresponds to some form of text. Remember, image elements do not have a closing tag.
<br>
<br> Let's say you wanted to put a line break into your webpage's text, then you would use the break tag &lt br &gt. This tag is also a void tag. Hence, using multiple &lt br &gt after a particular piece of text will lead to multiple line breaks.
<h5><b> Paragraph Tag </b></h5> As discussed before, the "br" tag creates line breaks. It is considered an "inline" element. Inline elements are usually for modifying short lines of code. In contrast, the paragraph tag denoted by "p" creates an invisible boundary arond the code
that you're working on. This kind of element is considered a "block" element. Block elements are used for groups of code or text.
<h5><b> Span (Inline) vs Div (Block)</b></h5> These tags do not do anything specifically like say the bold tag. However, they allow a specific piece of information to be modified by CSS code. Similar to "br" tag, the "span" tag is inline. Hence, it's used for small chunks of code. Just like
"paragraph" tag that created an invisible border around the code or text, you can use the "div" tag to do the same. Div is a block element used for large chunks of html code.
</p>
</ul>
</div>
<!--- END: Hypertext Markup Language--->
</div>
<!-- END Lesson 1-->
</div>
</body>
<!--- END BODY --->
<!--Normally for HTML5, you would need to put "</html>" to go along with "<!DOCTYPE HTML>" above. However, Codepen doesn't require this.-->
Raw
Stage1WorkSession1.markdown
Raw
style.css
/*My first stab at CSS*/
h1 {
color: white;
}
body {
padding: 20px 1ox;
font-family: Arial;
margin-left: 50px em;
max-width: 2500px;
color: #660033;
margin: 0 auto;
/*I know that the zero refers to top and bottom margins based on the example provided in class, but I don't really understand what the "auto" does.*/
font-size: 1.0em;
/*This sets the font size for the body. The "em" italicizes the text.*/
}
h1 {
text-align: left;
color: #993399
}
h3 {
text-align: left;
color: #000000;
}
h5 {
text-align: left;
color: #000000;
}
p {
color: #111111;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment