Stage 2 – HTML continued

This stage will look at the text formatting abilities of HTML. The basic text tags are:

Headings
Spans (rows of text with particular styles)
Paragraphs
Lists
Tables

Headings

Text was typed into TextEdit and saved as a headings.html file to see how it looked as a web page. Below are screen grabs showing the creation of the TextEdit file and also the result as a web page

Screen Shot Headings 1.png

Screen Shot Headings 2.png

Screen Shot Headings 3.png

Screen Shot Headings 4.png

So the result is a webpage showing 5 different sizes that ‘Headings’ can take from h1 to h5 where h1 is the biggest and h5 is the smallest.

Spans

Spans are lengths of text, and give us the opportunity to introduce styles. Styles can be included in the HTML, as we will do here, or separated into a stylesheet file (CSS).

The file was copied into TextEdit and the results are shown below.

Screen Shot Spans 1.png Screen Shot Spans 2.png Screen Shot Spans 3.png Screen Shot Spans 4.png

What’s important to note here is that the American spelling is used for ‘color’.

The span has applied the following text in red ‘Text with a style applied’.

My concern is why the word doesn’t is displayed incorrectly as doesnâ€™t

For the time being I am going to amend the text to read does not and then read up on the issue online.

Screen Shot Spans 5.png

Screen Shot Spans 6.png

Solution has been reached to the problem but will be looked into again.

Previous Problem ressolved

The problem with apostrophe’s has been rectified, I went back to double check the preference settings in textedit (specifically the check boxes in the ‘options’ section) and then I tested the spans.html file again.

Screen Shot Preferences 4.png

Screen Shot Spans fixed.png

Screen Shot spans.html web page fixed.png

Paragraphs

Note that the HTML in the spans.html file didn’t separate the second sentence from the first <span> sentence, even though they appear separate in the code.

We need to do this specifically with a paragraph <p> tag. So the Spans.html code was altered to create the following file ‘testparagraphs.html’

Screen Shot testparagraphs.html.png Screen Shot testparagraphs 2.png

As you can see the doesn’t appears correctly and also the addition of the tags <p> and </p> have created a separate paragraph of text.

The code has been altered again to create the file ‘testparagraphs2.html’

Screen Shot testparagraphs 3.png

Looking at the coding for ‘testparagraphs2.html’, I would assume that the second paragraph will now have changed from the black colour to green. This means that paragraph styles can also change colour and it doesn’t need the spans style.

Screen Shot testparagraphs 4.png

Exactly as predicted.

In the next exercise we are creating a file ‘testparagraphs3.html’ in which we are being introduced to the line break tag <br> (which doesn’t need a closing tag) and the inline style tag to make part of the test bold <b>…</b>

Screen Shot testparagraphs 6.png

Screen Shot testparagraphs 7.png

So the line break tag <br> seems to be the same as hitting the return key in microsoft word which would start the text on the next line but maintaining the same paragraph. In the above screen grab the text ‘Regular text, such as this, doesn’t need a tag.’ has been affected by the line break and sent to the next line.

Also, the inline style tag <b> has been applied in the above screen grab to make the text ‘such as this’ appear bold.

Lists

HTML has a built-in ability to produce lists with a few simple tags. There are three list types in HTML:

Unordered lists (with bullet points) <ul> for the list and <li> for list items
Ordered lists (with numbers or letters) <ol> and <li>
Description lists (with headings) <dl>, <dd> and <dt>

In the following exercise we will create ‘test lists.html’ and see what the results are for <ul> and <li> tags

Screen Shot testlists 1.png

Screen Shot testlists 2.png

Problem

As you can see from the above web page screen grab that a list is created will bulletpoints but the appearance of the symbol ‘Â’ appears an an error.

I decided to google search ‘what is the code to remove this symbol Â in html’ which took me and the following website seemed to have the answer

http://stackoverflow.com/questions/17493601/what-is-the-code-to-remove-this-symbol-Â-in-html

Screen Shot testlists 3.png

Screen Shot testlists 4.png

So from this tip I assume that the code <head> should be replaced with the code <meta charset=”UTF-8″>. I wasn’t sure whether I should keep the word head or not but I thought I would try without the word head as a first attempt.

I called the file ‘testlistsv2.html’

Screen Shot testlists 5.png

Screen Shot testlists 6.png

As you can see from the above screen grabs the code was a success and removed the errors.

The bullets are dark circles but this type of bullet can be altered by using a style. The next exercise shows us how to change the style of the bullets. I’ve called the file ‘testlistsv3.html’.

Screen Shot testlists 7.png

Screen Shot testlists 8.png

As you can see from the screen grab of the webpage above the unordered list has different bullet points with the addition of the code <ul style=”list-style-type:circle”>

I decided to randomly try replacing the word circle with square, triangle and star. The only successful outcome was square which can be seen below in the file ‘testlistsv4.html’.

Screen Shot testlists 9.png

Screen Shot testlists 10.png

A full description of list types is given on the following website link:

http://www.w3schools.com/html/html_lists.asp

This website is perfect for testing out problems very quickly and would have saved me time had I used it with the problems encountered so far.

It has a great function where the screen is split with the coding on the left and the result on the right of the same screen so very quick and practical to work with.

Screen grab below shows my ‘testlistsv4.html’ on their website and the ease with with the results of the coding can be seen on the same page as a split screen.

Screen Shot testlists 11.png

Tables

For a long time, tables were the only way to get any kind of control over the positioning of elements in an HTML page. They have now largely been superseded by other tags (divs), which we will look at in more depth, but tables are still useful in some situations.

Exercise 1

A series of codes were used to create the TextEdit file ‘testtable1.html’.

Screen Shot testtables 1.png Screen Shot testtables 2.png

The result was a table of 2 columns with 2 rows but no border.

<table> indicates the table as a whole.

<tr> is a row of cells.

<td> is an individual cell.

A column isn’t usually specified as such, but naturally occurs when each row has the same number of cells.

Exercise 2

To extend the code to make a table with 3 rows of 3 columns each. I decided I wanted to be adventurous and try to make the text in the first row ‘Column 1’ ‘Column 2’ and ‘Column 3’.

Then, to have Item 1 and Item 2 in each column.

Below are the results of my first trial at this exercise with files ‘testtable2.html’

Screen Shot testtable 3.png

Screen Shot testtable 4.png

My test was a success but it would look better if the columns were aligned to the centre. I researched the w3schools website but found out that the align attribute is no longer supported by most browsers.

Exercise 3

Now add this to the table tag:

I had to check on w3schools.com to make sure I was putting the above code in the correct place and I assumed it to replace line 7 <table> with <table border=”1″>

Screen Shot testtable 6.png

Screen Shot testtable 7.png

<table border=”1″> has placed a border around each row and each column of the table.

I tested with <table border=”10″> to see what happens and the higher the number the thicker the border around the table. Look at the screen grab below of a test on http://www.w3schools.com Screen Shot testtable 8.png

<table border=”1″> is another way of adding a style to an element, specifying the attribute directly rather than with “style=” as we did previously.

It is much easier to get full control over styles using CSS, so that is what we will generally do in future.

Exercise 3

A challenge:

Make a 2 row table with 2 cells in the top row and 3 cells in the bottom row, using the attribute colspan=”2” in one of the <tr> tags.

Firstly, I researched what ‘colspan’ means and the defintion found was COLSPAN (“how many across”) indicates how many columns across a cell should take up.

So the idea is for the first row to have 2 cells where the colspan of the second cell will be 2 cells across.

My first attempt at ‘testable4.html’ resulted in a successful completion of the challenge.

Screen Shot testtable 9.png

Screen Shot testtable 10.png

However, I wanted to made the headings bold and align them centrally and also try to align the second row centrally as well. So I read up on http://www.3schools.com and used

style=”width:50%” This code was used to widen each cell

<th>…</th> This tag was used to create bold headings and this tag automatically centres the heading inside the cell

<td style=”text-align:center”> CSS was used to align the second row centrally within each cell

As you can see below quite a few trials and errors were overcome to finally achieve my version of the challenge.

Screen Shot testtable 11.png Screen Shot testtable 12.png Screen Shot testtable 13.png

Screen Shot testtable 14.png

Screen Shot testtable 15.png

Practice

For practice we were advised to visit the following website links

http://www.w3schools.com/html/html_formatting.asp

http://www.w3schools.com/html/html_lists.asp

http://www.w3schools.com/html/html_tables.asp

http://www.w3schools.com/tags/att_td_colspan.asp

and other HTML lessons from

http://www.w3schools.com/html/default.asp

Summary

There are different ways of bringing simple styles into HTML:

style attributes within the opening tag: <span style=”color:red”>

attributes in the tag, without the ‘style’ tag: <table border=”1″>

inline styling tags: <b> … </b>

and different simple layout formatting techniques:

headings

paragraphs

spans

tables

lists

June 12, 2016 0

Stage 1

Preparation for Unit 64: Interactive Media Web Authoring

I’ve created a free wordpress site to document my progress with Unit 64 and to record all the exercises that will be completed. Any mistakes will be logged as will the outcomes to any problems.

In preparation for this unit I also cleared my desktop to make it easier to save exercise to my desktop without any clutter. (Nothing worse than working in a very disorganised way when it comes to coding).

All the Stages were printed in advance and filed into a folder to make it easy to work through the exercises and to make notes if necessary.

The Brief

The assignment will introduce me to the main language of web design and will culminate in the publication of a small website to ‘showcase’ the work I have produced for other units in this HND course.

I’ve read the description for the Distinction grade as that is the goal for this particular unit.

Stage 1 – Intro and HTML

I’ve learnt that http stands for ‘hyper-text transfer protocol’ which is what my browser on my laptop/desktop sends (everytime I enter a website address) to a remote server where the website is actually stored. That remote server responds by transmitting the requested page back to the browser on my desktop/laptop.

At the end of this unit we will be saving our own website on a remote server.

Also, learnt that html stands for ‘hyper-text markup language’. This can be viewed in a text file as code which looks like lines of text with gylph’s or it appears as a website in a browser.

So a web site – is simply a collection of webpages linked together and

a web page – is a HTML text file.

There are three types of files that are now thought of as the three linked languages of the web and they are: HTML, CSS (Cascade Styling Sheet) and Javascript file (code that can make elements move or that the user can interact with)

The HTML file is the core item of websites and the CSS and Javascript files are linked to it.

On reflection, I had created some SWF (Shockwave Flash File) using illustrator as part of Unit 29 and I ams assuming that SWF files are a type of Javascript File as by definition they make elements move. I maybe wrong but this seems to be a fair assumption.

We are advised to not use word to edit html files but to use Notepad. As I am using macs I thought of using the application ‘Notes’ but then I realised that the application ‘TextEdit’ would be an ideal alternative to Notepad.

Screen Shot of Notes.png Screen Shot of TextEdit.png

Exercise 1

The code was typed into TextEdit and then saved as a HTML file on the desktop. The screen grabs below show both the TextEdit file and also the saving of the TextEdit file as ‘test1.html’ onto the desktop. TextEdit has a drop down option of saving any text files with an html file extension.

Screen Shot of test1.png Savind test1 as html file.png

When I double clicked onto the file icon on my desktop I was taken to a new web page displaying the coding for the test1.html file. A screen grab of this web page is below

Screen Shot of Exercise 1 web page.png

Exercise 2

A new code was typed and saved as test2.html (screen grabs below)

Screen Shot of test2.png Screen Shot of saving test2 as html extension file.png

This time when I double clicked on the desktop file test2.html I was taken to the following web page. (screen grab below)

Screen Shot of test2 web page.png

The exercise asks us to hover over the ‘paragraph’, click and see what happens.

But nothing happens….

I’m thinking that perhaps it could be my browser so instead of safari I open up test2.html in google chrome and in firefox but nothing happens. So I am thinking whether the fact that I copied and pasted the code from word into TextEdit whether it’s corrupted, so I decided to write out the code again, save it as test1b.html and see what happens.

Below are screen grabs of the test1b.html text file and also the test1b.html web page.

Screen Shot test1b.html textedit file.png Screen Shot test1b.html web page.png

Problems!

But nothing changed…

So I thought about googling about textedit to see if it is compatible for creating html files. The following page shed some light onto my dilemmas.

http://computers.tutsplus.com/tutorials/quick-tip-configure-textedit-for-coding-html–mac-44786

So 2 settings had to be changed in the preferences of TextEdit

The first preference we need to change is under the New Document tab, Under Format. You want to set the format to Plain Text by checking the check box.

Screen Shot changing preferences to plain text.png

2. Next, under the Open and Save tab, under When Opening a File, check the box for “Display HTML files as HTML code instead of formatted text”.

Screen Shot displaying HTML files as HTML code.png

So I carry out the above 2 steps in TextEdit preferences

Screen Shot preferences 2.png Screen Shot preferences 3.png

Editing HTML in TextEdit

When TextEdit is relaunched, the formatting bar is gone from the top of the interface. This lets you know that you are only using basic, un-formatted text.

TextEdit is now set up For basic HTML code editing.

To create a new HTML file, you make a new document like normal. However, when you save the file you need to add “.html” to the end. TextEdit will ask you if you want to use that file extension. Click “Yes” and you’ve created an HTML file.

Exercise 1 – Attempt 3

So a new test1c file was created and saved with an html extension.

Screen Shot creating test1c file.png Screen Shot saving test1c by adding .html.png Screen Shot test1c selecting use html.png

The results were as follows when the test1c.html file was double clicked….

Screen Shot test1c web page.png

A positive result and it didn’t matter what browser, the problems were with the preferences in TextEdit and the fact that the text wasn’t plain text.

Exercise 2 – Attempt 3

Same steps were carried out for exercise 2 to see what the results would be.

Test2c.html was created using TextEdit.

Screen Shot test2c 1.png Screen Shot test2c 2.png Screen Shot test2c 3.png

The resulting test2.html file worked and took us to a web page with 2 lines of text and the second line ‘This is a paragraph linked to test1’ looked to be link to another web page. Screen Shot test2c 4.png

But when I double clicked on the ‘This is a paragraph linked to test1’ the following error page appeared.

Screen Shot test2c 5.png

My initial thoughts were that the first file wasn’t on desktop but then I realised that I had labelled my 3rd attempt file for test1 ‘test1c’. So by renaming test1c as test1 the link worked.

Screen Shot test2c 6.png

I realised that I could have easily edited the code for test2c.html and replaced the text ‘test1’ with ‘test1c’.

I have come to the realisation that coding is very logical and methodical. Html seems to all be about following the correct rules in the correct sequence.

I decided to attempt my own extension task using these two exercises.

Experiment using Exercises 1 & 2

I decided to replace the text in test1 with the following 2 lines

Amin Miah

Graphic Designer

and in test2 I decided to replace the text with the following 2 lines

Who is Amin Miah?

Click here to find out who Amin Miah is.

I also decided to rename the files to make sure I understood about linking files, so test1 was renamed ‘aminmiah’ and test2 was renamed ‘whoisaminmiah’.

Screen Shot testamin.png Screen Shot result of testamin.png