HTML Lesson 3: Paragraph and Heading Tags

So, we have learned about making a head and body in HTML, and now we need to actually print something onto our page.

Paragraph and Heading tags

The majority of your website content will be written in a <p> tag, or the paragraph tag. This is the tag to write basic sentences and form paragraphs. To make your site more readable and attractive, you will add <h1> or heading tags.  Let’s take a look at the tags:

<p> This is a paragraph </p>

<h1> This is a heading </h1>

<h2>  This is a smaller heading </h2>

<h3> This is an even smaller heading </h3>

There are actually 6 heading tags <h1> <h2> <h3> <h4> <h5> <h6> to select from, depending on the size of the heading you need.

I have written them in on jsbin.com and produced the following output:

headingstagcomparison

When making a webpage, you will want to use a variety of headings and sections of text.

Exercise:

Write a program that prints a 2 paragraphs with two heading tags.

(Click here if you need a refresher on the basic structure of an html page.)

 

 

Advertisements

HTML Lesson Two: Text Editors for HTML

html-154434_1280Welcome to my 2nd lesson in HTML. Today, I will explore the different options for compiling and running your program.

When I was first introduced to coding, I wrote and ran a webpage that read “Hello, World.”** It was so cool to see these words print on the screen, since I commanded them to appear. Computers are essentially bits of metal and plastic that cannot do anything unless told specifically by the programmer – and in this case, me!

File:Notepad.png

The easiest way to compile HTML code is in the standard Notepad program, (or Text Edit if you are on an Apple.)

The Steps to Compile “Hello, World” in a web browser.

1. Open Text Edit or Notepad on your computer.

2. type in:

<DOCTYPE html>

<html>

<body>

<h1> My First WebSite </h1>

<p>

Hello, World!

</p>

</body>

</html>

3. Click “File” — “Save As (somename).html. It’s very important to save the file as a .html file for this to properly work. The default is a txt (text)file. Additionally, save it on your Desktop, rather than imbedded into a folder.

4. Once you have saved your work, go to your Desktop and you will now see a file with an icon such as below if you are using either Chrome or FireFox.

myHTMLcapture

myHTML

5.Doubleclick the icon and a new web browser should appear! Congrats this is your first website!

page

**Some cool computer science info: Hello, World is supposedly the first words printed in a computer program. While this can’t actually be proven, it’s a fun legend and nearly all books and courses will have you type “Hello, World” as your first program.

“My website”

In this code, I was playing around with the padding and spacing of the edges. This is made using a table in HTML. When websites were originaly started, tables were the primary object used for making website layout. Tables allowed a designer to make a spread the length of the webpage and nest other tables inside (as I did in this example.)

However, this style of layout is now mostly looked down on, as it can be extremely code-heavy and renders slowly. It is cumbersome. Instead, the

tag is used. I will talk more about the div tag later!

Erin’s Awesome Website

about: bio blog social media
Erin Fernandez

  • wife and mother of two
  • Degree in Econ and Poly Sci
  • Worked in DC
  • loves to read and blog
  • Item one
my latest blog post Connect with me on:

  • Facebook
  • Pinterest
  • Instagram
  • Item one
  • Item one

 

 

Understanding Computers and the Internet

I just learned about another Harvard extension course that looks really good – Understanding Computers and the Internet. It is taught by Prof David Malan, who also teaches the CS50 course I mentioned previously. I just started watching it this morning, and it looks like a good intro for those who want to know a bit more about operating their computer and the Internet beyond the basics of what you probably already know.

Check it out!

My Favorite Online Learning Resources

I haven’t been able to spend much time online lately, as a bad cough and cold descended on our home. Right now I am actually pushing my baby’s bassinet back and forth with one hand hoping to keep her asleep! I’m back with a quick post about a few useful (and free!) resources I have been using.

EdX and CS50

My first real introduction into Computer Science was through CS50 through EdX . It is the introductory Computer Science course at Harvard. Harvard (and many other top universities) have teamed up with EdX to offer many of their college courses for free online. CS50 is a great course. It is taught by a very charismatic professor and it is presented in a very fun and approachable way. The majority of the real students in the course at Harvard have never taken a CS class nor have they studied or played around with any computer programming. There is a great online CS50 community on Facebook which is very encouraging and motivating.It is not easy, however, and you do have to commit quite a bit of time to read the books, material and complete the exercises.

I suggest watching at least the first few videos, simply to get a feel of what CS has to offer and to learn that maybe this is possible to learn. Click here to watch it on the CS50 youtube channel.

Udemy Courses

Udemy is a great online resource for learning just about anything! People with an expertise is something make an online course and you can either purchase it, or wait around for it to become discounted or free. The discounts/free options come around often. There are many options for computer programming or Iphone App Development. I have really benefited from this media for learning because you can watch the teacher actually code or show examples on his screen. I will usually keep one screen open with the course and the other with my compiling program and follow along as they go.

The Library

Third, check out the library. My local library has some great tech books, and some are even geared for children if you want a super-easy introduction to a new subject or language. My trouble is that I always check out too many to read in the 3-week check out period! I love to surround myself with great books and new learning material.

Coffee and Coding

A Cup of Coffee

When I was first learning to code (or computer program – I will use the terms interchangeably), a friend asked me to write out the steps I would take to make a cup of coffee. My quick answer was something along the lines of “fill the pot with water. Add 2-3 T coffee grounds to the machine. Pour the water through and turn it on.”

He responded by saying, “where is the water coming from? Is there water? Where is the measuring spoons? Do you need to plug it in first? Perhaps first you have to get out of bed and walk to the kitchen?”

This small exercise was to teach me that even when the task seems very simple, there are many parts of the task that are actually automatic simply because I have already know how to do the task. Computers, on the other hand, do not come “prebuilt” with this knowledge. The first starting point when learning to code is to assume nothing. Although most people would know how to fill a coffee pot with water (i.e., turn on the faucet) a computer is, honestly, pretty stupid. It can only do what you tell it to do. And this is precisely computer programming.

What is Coding?

Coding is essentially providing very specific instructions to a computer to complete a task. You may remember from your computer classes in high school or college that computers only understand zeros and ones. When you write the code in a computer language and run it, a computer will then compile (or process) language into binary (the zeros and ones.)

If this seems to not make any sense, don’t worry. My mistake when beginning was that I let myself get so bogged down by these details, and I froze up and thought I would never learn this. Right now, just know that you will be learning a new language, and the computer will translate that language into one that the computer can understand.

What are the languages?

One of the first widely accepted and used language was “C”. It is fairly easy to learn and will allow you do make certain programs, but it quickly was replaced with C++ and C#, which allowed programmers do write more sophisticated and complex code. HTML, CSS, and JavaScript are the backbone for creating webpages (and the languages I am focusing on currently.) PHP and Python allow for much more interactive websites –  Facebook uses PHP.

My Story

I do not have a background in Computer Science, and the credit goes to my husband for introducing me to the world of coding, testing, and all things tech. If you had told me 5 years ago I would have a blog specifically for web programming, I would not have believed you!

When I started to learn more and more from my husband, I realized, wow! this is very interesting and accessible! Between the internet and the library, I had all the means to teach myself a few new skills. Additionally, so many people are gaining these skills, and the likes of Bill Gates, Mark Zuckerberg and many others agree that being able to code is going to be a general requirement for most jobs in the future, just like reading and math skills are today. I certainly know that I will encourage my children to learn to code at an early age.

As I learned more and more, my interest grew. It especially took off when I began to take online courses for HTML.  I already had a small personal blog up and running, and it was really encouraging and motivating when I could learn a little HTML and edit my blogs exactly how I wanted them, rather than just within the confines of the (unnamed) blogging service I used.

I began by enrolling in a few HTML courses on Udemy.com (more on this in a new post) and rented a few books from the library. And I just began practicing over and over. Between all the work with the house, kids, etc, I don’t have a ton of time each day to devote to this, but I slowing becoming more organized and efficient with my time. I started this blog to document what I am learning and how I am learning it.