Getting Started

Writing HTML is commonly thought of as coding. It is more correctly defined as markup. We will use some freely available web resources to learn the building blocks of developing websites.

Careers in Web Development A place for everyone

The web is a vast domain, with rapidly evolving jobs. It common to demarcate the web into two basic roles: coders, who write HTML, CSS, JavaScript, PHP, Ruby or some other code, and designers, who create the visual design of a website. While this distinction between coders and designers is convenient and facile, there are actually a wide range of careers available in web development.

You’ll find that many jobs in web development are non-discrete: the responsibilities and roles of these careers overlap.


Homework

1-1 Slack

Join https://join.slack.com/t/mclinclass/signup This channel has all current students in my ATCM course.

  • Use your UTD email.
  • You can have any (SFW plz) username you want, but your FN and LN must match the class roll.

Submit for credit: your Slack username

1-2 Code Academy

Create an account on Code Academy

  • Complete the following under “Learn HTML“:
    • HTML Elements and Structure
    • HTML Tables

Submit for credit: a link to your profile – https://www.codecademy.com/yourusernamehere


1-3 Semester Project Planning

I’m going to use Trello to keep track of your progress during the semester on your final projects.

  • Join and create a Trello board at https://trello.com/ 
  • Create a board with the following lists (see example board)
    • To-Do
    • Waiting
    • In-Process
    • Done
  • Add other lists as the need arises.
  • Change the background color/images from the default.
  • This is your Semester Project Planning Board. You can create as many boards as you wish on Trello, and use them to plan your long-term or short-term assignments and goals.
  • Create Cards for:
    • Choose Topic for Semester Project
    • Choose & Purchase Domain Name
    • Choose & Purchase Web Hosting
  • On each of the cards, add a due date of 1/22/2018
  • On the Domain Name card add a checklist:
    • Dependency: Select Hosting Provider
    • Select hosting plan
    • Purchase
    • Point to Nameservers on hosting provider (This’ll make sense later.)
  • On the Web Hosting Card add a checklist:
    • Select Hosting Provider
    • Select hosting plan
    • Purchase
    • Add purchased domain to hosting (This’ll make sense later.)
    • Install WordPress on host

Submit for Credit:  a link to your Trello Board with the above tasks completed. You will be using this board to track your work this semester, and several homework assignments will refer to this board.


1-4: Write HTML Using Notepad or TextEdit

Web pages can be created and modified by using professional HTML editors, however, with many older systems still in use, you will need to know how to use a simple text editor like Notepad (PC) or TextEdit (Mac) to edit/create/troubleshoot HTML and CSS.

Follow the four steps below to create your first web page with Notepad or TextEdit.

Step 1: Open Notepad (PC) or TextEdit (Mac)

You’ll need to change some preferences to get the application to save files correctly.

For a mac, in the app’s Preferences > Format > choose “Plain Text” Then under “Open and Save”, check the box that says “Ignore rich text commands in HTML files”. Then open a new document to place the code.

Step 2: Write or copy some HTML into the text editor (you can just copy this code):

Notepad

Step 3: Save the HTML Page

Save the file on your computer.

  1. Select File > Save as in the Ntext editor’s menu.
  2. Name the file “index.html” and set the encoding to UTF-8 (which is the preferred encoding for HTML files). You can use either .htm or .html as file extension. There is no difference any longer.

Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the file, or right-click – and choose “Open with”).

The result will look much like this:

View in Browser

Images in Another Folder

If not specified, the browser expects to find the image in the same folder as the web page. However, it is common to store images in a sub-folder. You must then include the folder name in the src attribute:

<img src=”/images/html5.gif” alt=”HTML5 Icon” style=”width:128px;height:128px;”>

Images on Another Server

Some web sites store their images on image servers. Actually, you can access images from any web address in the world:

<img src=”https://www.w3schools.com/images/w3schools_green.jpg” alt=”W3Schools.com”>

HTML File Paths

A file path describes the location of a file in a web site’s folder structure. File paths are used when linking to external files like:

  • Web pages
  • Images
  • CSS Style sheets
  • JavaScript

Absolute File Paths

An absolute file path is the full URL to an internet file:

<img src=”https://www.w3schools.com/images/picture.jpg” alt=”Mountain”>

Relative File Paths

A relative file path points to a file’s location as compared to the current page.

In this example the file path points to a file in the images folder located at the root of the current webpage:

<img src=”/images/picture.jpg” alt=”Mountain”>

In this example the file path points to a file in the images folder located in the current folder:

<img src=”images/picture.jpg” alt=”Mountain”>

In this example the file path points to a file in the images folder located in the folder one level above the current folder:

<img src=”../images/picture.jpg” alt=”Mountain”>

Best Practices:

  • It’s a best practice to use relative file paths (if possible). When using relative file paths, your web pages will not be bound to your current base URL.
  • It’s considered poor form, and bandwidth-theft, to link to an image hosted on another website unless the owner of that site intends that image to be used for that purpose (web ads, etc.). You should store that image (with the original site’s permission) on your own server. Memes don’t count 😉

SUBMIT FOR CREDIT: A simple webpage you have created in a text editor with clean tags and accurate syntax that has the following:

  1. Basic HTML document structure (doctype, head, body).
  2. An image in the same folder as your HTML page.
  3. An image hosted on another website (Imgur, GIPHY, or other free image sources intended to be shared are a good choice)
  4. A paragraph describing the image you’re inserting.

1-5 Required Reading

Submit for credit: Create a simple web page that explains three things you learned from the readings. Save your work in a .txt file and upload.