Research, Udacity Class

Udacity Classes 3: Intro to HTML and CSS (Part 1 of 2, HTML)

So far I’ve gone through TWO Udacity classes (to add to the 3 I did waaaay back in 2012!). These were Shell Workshop (blog notes here) and Version Control with Git (blog notes here). I’m feeling great about all the background I’m getting to the various technology projects I’ve covered in this blog and for years prior to it.

I’ve done some *light* HTML editing in WordPress and Mindbody (I think that was the name anyway), but it’s time to formalize these concepts to really know wtf I’m doing. So this time around I’m taking the Intro to HTML and CSS class!

Me tinkering with HTML until I get it right…

Lesson 1 is about HTML Syntax, and this is where I’ve had some past experience (including watching a 22 hour course recording from Harvard Intro to Computer Science taught by David J Malan). That said, the course covered A LOT of other material, so a class concentrated on HTML/CSS is exactly what I need to add to my knowledge arsenal. I also took a Udacity class on Programming Languages where we built a web browser, but again we didn’t get into the concepts of WHAT exactly HTML is.

I’ll again use bullets to summarize my learning since it’s much easier to review later and to me a better way to take notes. I will also be highlighting key terms, because this is what I’m really interested in. To talk to the other cool kids with proper education, I need to know how to speak their lingo. And with that, let’s BEGIN!

  • The name of tags such as <h1> </h1> are considered HTML elements
    • The <h1> can specifically be referred to as the h1 element
    • I’ve already heard of the concept of tags but it’s good to know that as a whole they are considered HTML elements
    • For example: <p> is a tag, and <p>This is a paragraph</p> is a paragraph element
  • An element is composed of an opening tag, a closing tag, and in between them is content
    • Note: the content is considered the child of an element
  • Some elements are different, such as img (images) as they do not have a closing tag. These are called void elements
    • <img src=”image.jpg” alt=”a picture”>
    • src is obviously the source of where to find the image and its name
    • alt is the alt text that has several purposes such as describing the picture and its purpose, improving SEO to index the picture properly, helping visually impaired users using screen readers to know what the picture is, and lastly it shows up if the picture fails to load
    • note: the additional detail on src and alt was not in the lesson, but I figured it was worth noting anyway since the <img> element is widely used in HTML
  • <p> is a paragraph and will be treated as such
  • <span> is writing to a line, so leaving a space if you are using two spans in a row will allow there to be a space between the lines
    • <span>hello there </span>
    • <span>my friend!</span>
    • Will show up as: hello there my friend!

The next part of Lesson 1 began with setting up my own environment. The first things to create are installing a browser to view the code as well as a text editor to create the code.

  • For code, you will want to use plain text to create code–using a rich text like Microsoft Word will alter the characters and they will not be considered ASCII characters needed to interpret the code
  • IDE stands for Integrated Development Environment, examples are Microsofts Visual Studio and Apple’s Xcode
    • This allows you to write code, compile it, and run it for you
    • IDE’s are incredibly useful, but not very useful to web code because browsers interpret the code and it does not need to be compiled
  • Popular text editors include:
    • Visual Studio contains support for debugging, embedded Git control, syntax highlighting, intelligent code completion, snippets, and code refactoring
    • Atom is a free and open-source text and source code editor for macOS, Linux, and Microsoft Windows with support for plug-ins written in Node.js, and embedded Git Control, developed by GitHub
      • I was using Atom because of its integrated Git control and its GitHub origins (as I use that A LOT for my projects), but switched to Notepad++ since it was lighter/faster to use
      • I may switch back in time when I begin more hardcore development, but for these classes I found Notepad++ to be faster and easier to complete the exercises in the classes so far
      • Atom is what this course uses, so it looks like I’ll be getting more acquainted! 🙂
    • Emacs is an open source text editor that’s been around since the 1970s. Along with Vim, it’s one of the most popular Linux text editors
      • Emacs is almost considered an OS (operating system) as it comes with a lot of bells and whistles
      • It can be highly customized, but the learning curve is very steep
    • Vim, or Vi IMproved is the other text editor in the Unix Editor Wars
      • I’ve used Vim before on projects because of user suggestions in forums when I’ve been stuck.
      • These suggestions were always to alter code in a file, and looking back I now realize it was a command line text editor
    • I will likely use a combination of Vim for light editing in the command line, Notepad++ for light edits in a GUI, and lastly Atom for more extensive edits to files in a GUI

I am floored by the amount of information provided in just Lesson 1! This is already filling in so many gaps and bridging my hobbyist knowledge I’ve acquired. I am so excited! 🙂

  • Popular and recommended web browsers
    • Google Chrome and Mozilla Firefox are the two recommended for the course (which I have both, and frequently switch between the two depending on the web page I’m using as performance/rendering of page sometimes differ)
    • Apple Safari and Microsoft Edge are OS specific web browsers, and while it is important to test your code for how it renders in each browser, these two do not have nearly as robust of developer tools in them
    • Google Chrome is what this course will use
Pictured above: the reason I don’t use Chrome anymore….
  • Web Development Workflow:
    • Create/edit the code in a text editor
    • Save the code
    • Open the file in the web browser to view it (or refresh if already open to view the changes, split screen between the text editor and web browser is useful during this development)
      • There are developer tools that will auto-refresh every time you save, or even see the changes LIVE!
  • The rundown on data trees:
    • The parent-child relationship/hierarchy is considered a data tree
    • Terms include child, parent, and siblings in a data tree
    • I have a background in supply chain, so this is very reminiscent of BOMs (build of materials) structure, so this concept isn’t new to me (which is GREAT, because this stuff can be confusing at first)
  • <div> element is used to group chunks of content together
    • This makes the <div> tag a parent for any other elements that are sandwiched between these tags, making them children and siblings of the <div> tag
  • <em> tag means emphasis and makes the content appear in italics
  • The Mozilla HTML elements reference page is the recommended site to look up and find tags
  • Examples of tags:
    • <span>: generic inline container for phrasing content
    • <b>: the standard bold element, comes up first when searching for “bold”, but the <strong> tag is recommended to use instead
    • <strong>: gives text strong importance, and is typically displayed in bold
    • <i> will show as italics, BUT you should not use it for that anymore and should instead use the <em> element
    • <sub>: HTML subscript element, defines that span element content should be displayed smaller than the other inline text
    • <sup>: The HTML superscript element, defines that span element content should be displayed higher and smaller
  • The structure of an HTML document not only defines what should be displayed, but also how to display it.
  • The template for a proper structure includes:
    • DOCTYPE: Describes the type of HTML. While there are technically different types, for 99.999% of the HTML you’ll write, you’ll likely be fine with <!DOCTYPE html>.
    • The next part of the document should be the tags <html> </html> to encase the entire <head> and <body> sections to ensure the web browser parses the data as an HTML file
      • The class I took on building a web browser and parsing data covered this concept very thoroughly
    • <head>: Describes meta information about the site, such as the title, and provides links to scripts and stylesheets the site needs to render and behave correctly.
      • the document’s title (the text that shows up in browser tabs): <title>About Me</title>.
      • associated CSS files (for style): <link rel="stylesheet" type="text/css" href="style.css">.
      • associated JavaScript files (multipurpose scripts to change rendering and behavior): <script src="animations.js"></script>.
      • the charset being used (the text’s encoding): <meta charset="utf-8">.
      • keywords, authors, and descriptions (often useful for SEO): <meta name="description" content="This is what my website is all about!">.
      • … and more!
      • this class suggests just focusing on the <title>About Me</title> and <meta charset=”utf-8″> tags for now
        • <meta charset="utf-8"> is pretty standard, and will allow your website to display any Unicode character. (Read more on how UTF-8 works here.)
        • <title> will define the title of the document and will be displayed in the tab of the browser window when a user visits the page
    • <body>: Describes the actual content of the site that users will see.
  • The standards of how to define these elements is currently HTML5
  • Below is a visual of the data tree for an HTML document

To make it simple, this is the full HTML template:

  • To help prevent from making mistakes with HTML, there is a tool called the W3C HTML Validator that you can copy/paste your code into to ensure there are no errors
    • Ensure you include the <!DOCTYPE html5> statement to ensure it is interpreted as HTML5 and not HTML 4.1
      • NOTE: I found this suggestion to be incorrect when validating, instead the recommendation from the interpreter was to simply use html
      • To use HTML 4.1 now it seems you need to use a very specific doctype outline in this webpage on the subject
    • Also include the <html>, <head>, and <body> tags
  • When I finally got the message “Document checking completed. No errors or warnings to show.” this is how my HTML document was structured:
<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="utf-8">
<title>About Me</title>
</head>

<body>
<h1>This is a title</h1>
</body>

</html>

And FINALLY we are done with Lesson 1! I think the rest will be easier with less notes, because I really wanted to thoroughly document the structure and keywords as that was really the critical information I was missing. Well, until we get to the CSS section anyway, since I am very unfamiliar with CSS.

Well that was SO much harder than it had to be

The next Lesson is simply to test writing HTML, so instead of taking notes I’ll just make code snippet sections that documents the various ways this lesson tests my understanding of writing HTML. Note: the <!– comment –> lines denote comments and are not actually interpreted by a web browser.

<!-- Make a button -->
<button>This is a button</button>

<!-- Creating headers -->
<h1>header1</h1>
<h2>header2</h2>
<h3>header3</h3>
<h4>header4</h4>

<!-- HTML unordered list -->
<ul>
   <li>HTML unordered list</li>
   <li>Tea</li>
   <li>Milk</li>
</ul> 

<!-- CSS unordered list -->
<ul style="list-style-type:square;">
   <li>CSS unordered list</li>
   <li>Tea</li>
   <li>Milk</li>
</ul> 

<!-- JavaScript unordered list, section added to <head>: -->
      <script type="text/javascript">
        function ScrollList () {
            var list = document.getElementById ("myList");
            var listItems = list.getElementsByTagName ("li");
            list.appendChild (listItems[0]);
        }
    </script>
<!-- JavaScript unordered list, section added to <body><p>: -->
<ul id="myList">
  <li>JavaScript unordered list</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<!-- In interpreted the question horribly wrong, it meant to made a LIST of the words HTML, CSS, and JavaScript...not to write them in it! I figured it was kind of a hardcore request! Actual answer here: -->
<!DOCTYPE html>
<html>
  <body>
  <p>Any time you see a sequence of similar objects in a web site, it's probably a list. That goes for lists of articles on your favorite news app as well as things like videos on YouTube or Netflix.</p>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
</body>
</html>
<!-- Modeled code after HTML tree shown below -->
<!DOCTYPE html>
<html lang="en">
<body>
  <!-- Did you notice that the body tag - the top of the sample tree - is already here? You don't need to add another one. When you're done, you can click over to the solution.html to check your work.-->
  <h1>Header1</h1>
  <div>
    <p>Paragaph1</p>
    <p>Paragraph2</p>
  <div>
</body>
</html>
Relationship tree: A body tag is connected to an h1 tag and a div tag. The h1 tag is connected to text content. The div tag is connected to two p tags, which are each connected to separate text content.
  • The next section involves creating hyperlinks
  • The details on the hyperlink <href> tag are as follows:
    • Inside the opening a tag there is href, which stands for “reference.” This is called an attribute.
    • Attributes like href describe the properties of HTML elements. In this case, the href attribute is the target URL that the link will open. The content inside the anchor element is the text that users see displayed on the page.
  • This is the format that you must use when you make hyperlinks:
    • There is a space between a and href.
    • There are no spaces around the =.
    • The website has two " around it.
    • There are no spaces between the href attribute and the > of the opening tag.
<!-- Create a link that displays as Google for the URL https://www.google.com -->
<a href="https://www.google.com">Google</a>

<!-- Add an image from http://udacity.github.io/fend/images/udacity.png and alt Udacity logo -->
<img src="http://udacity.github.io/fend/images/udacity.png" alt="Udacity logo">

<!-- External path example (your computer is the client and the protocol to request is HTML in this example -->
<a href="http://labs.udacity.com/fend/example/hello-world.html">Hello, world!</a>

<!-- Internal path example -->
<a href="/Users/cameron/Udacity/etc/labs/fend/example/hello-world.html"> Hello, world!</a>

<!-- Use the figure tag to create a caption to give credit for a photo used -->
  <figure>
    <img src="redwoods_state_park.jpg" alt="Redwoods state park">

Okay, so the last example is pretty hefty, so I’m giving it its own section. To be honest, I did not do this exercise as I felt it was a pretty simple in theory and I really want to move on to the CSS part of this class.

Let’s move this along
<!-- Create mockup of this blog post: blog.udacity.com/2016/01/hottest-jobs-in-2016-2-web-developer.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Web Dev Blog Post</title>
</head>
<body>
  <!-- Format the text below! When you're done, you can click over to solution.html to see how I did it. 
-->
  Hottest Jobs in 2016 #2: Web Developer

  By Christopher Watkins 
  
  January 19, 2016

  http://i1.wp.com/blog.udacity.com/wp-content/uploads/2016/01/Slack-for-iOS-Upload.jpg?zoom=2&resize=320%2C168
  
  There is a simple reason why Web Developer is such a hot job right now. Put simply, what Web Developers do is create how we experience … the web. If you proceed from the notion that every person who engages with the web would prefer a great experience, then you can say that everyone who engages with the web would prefer that a Web Developer have done a great job. Companies of course know this, so they hire Web Developers to ensure their sites provide great experiences. So, lots of websites and lots of users means lots of demand. LOTS of demand. 🔥
</body>
</html>

Alright, with all these great examples of HTML I think I’m well prepared to move on to Lesson 3: CSS Syntax!!!

Leave a Reply