Even More HTML!

I know it’s  been several years since the first time I used it, but it feels like the corse the site provides is severely deminished. The site now includes ‘pro’ sections to each course, implying that they now keep their exercises and slightly more advanced methods on a paid route. The site is now harder to navigate to new exercises. While the site is more aestheticly pleasing, it seems to have exchanged this for accessability.

As the chapter on COMMON ELEMENTS begins, we are reminded that all content for the site being made must be placed within the opening and ending tags of the <body>.

Screenshot (1)

HEADINGS:

There are 6 different heading tags that can be used, with 1 being the biggest and 6 being the smallest. All are still bigger than the stand font size. Obviously, these are tagged with <h1>, <h2>, <h3>, <h4>, <h5> and <h6>.

Screenshot (2)

Next up, Paragraphs, Divs and Spans. To the best of my knowledge, I haven’t come across Spans, or at least it’s been a long time since I’ve needed them.

Paragraphs are just that. Paragraphs. The tag is simple and easy to remember, simply a <p>. These contain simple blocks of text. Divs are boxes that can be used to divide pieces of code within the body. Anything contained in <div> in held in it’s own box. This can be very handy for laying out the page. According to Codecademy, Spans contain short pieces of text or other HTML. They are primarily used to wrap small pieces of content that are on the same line as other content and do not break text into different sections. They are shown as <span>.

Example of <div>, <p> and headings:

Screenshot (3)

Next up is <em> and <strong> or ’emphasised’ and ‘strong’. <em> tags will put any text inclosed with in italics, while <strong> will put them in Bold.

Screenshot (5)

 

Advertisements

Trying new Programming Software and HTML – Mad Scientist

Previously, I have been using Dreamweaver as my standard coding program. I’ve been using Dreamweaver since my first year of university but I’ve never been the biggest fan of it. So, time to try out some new programs.

When I first taught myself HTML, I used an old library book and notepad on an old Windows XP machine. While I know notepad can still be used, I want something that can still recognise Syntax’s to help out a little when I may type a word slightly wrong. A common problem of mine. And that can easily run on my computer without slowing everything else down. With Adobe products, I find they take up more power than needed.

There’s one program I have heard of before and used slightly, so I think I will give this one a try. Notepad++

Screenshot (162)

Downloaded the software, very easy to install and fast loading. Upon opening the software, I’m a little lost.

Screenshot (163)

I opened a new file and tried to type something simple in JavaScript. The website refereed to the software’s ability to recognise syntax and give suggestions, but I couldn’t see any of that. After looking around a little, I found that in the language setting up above, I can change the coding language and this activates all the little things like syntax recognition. The ‘run’ function is much simpler with plenty of options. At first glance, I think I may prefer this software to Dreamweaver, though admittedly there are things I’ve gotten far too used to. Such as a live coding view.

While I know HTML, I think it will be worth going back and relearning the software from the ground up again, as it has been a while since I’ve used it.

HTML stands for “Hyper Text Markup Language”.

photo-07-02-2018-14-22-02.jpg

<!DOCTYPE html> – Declaration at the beginning of the code to tell the computer what kind of document it is, in this case, HTML.

<html> </html> – Beginning and end of HTML code.

<h1> </h1> – Heading size 1.

Photo 07-02-2018, 14 34 18

<head> </head> – Contains the metadata for a webpage. Metadata is information about the page that isn’t displayed directly on the webpage.

<title> </title> – The browser displays the title of the page because the title can be specified directly inside of the <head> element by using a <title> tag.

The title appears in the tabs at the top of your browser. Like this:

Screenshot (164)

<body> </body> – The main body of the webpage.

So, the basic layout of a webpage looks like this:

Screenshot (165)

<p> </p> – Paragraph tags.

This does all feel very repetitive, but the point is to refresh my mind…

<br /> – Line breaker. when put into a paragraph tag, it separates the text into two lines. Example: <p> Line One <br /> Line Two </p>

– Div boxes allow for code to be placed in “a box” within the body of the code.

Screenshot (166)

Commenting! The most useful tool imaginable. To comment something out, for example a paragraph. Use:

<!– <p> this is being commented out </p> –>

 

JavaScript Part Two – Mad Scientist

Control Flow!

  • Control Flow statements enable JavaScript programs to make decisions by executing code based on a condition. If a given condition is true, we execute one block of code. If false, we execute another block.

So, if and else statements. Similar to the things we programmed in Action Script during undergraduate study. After reflecting on the previous lessons, it’s become quiet obvious how similar JavaScript is to Action Script.

Test code given:

Screenshot (158)

In this case, we give the variable userName a value, and we can change the variable knowsJavaScript to true if we want and all possibilities have an outcome.

Screenshot (159)

Yes. With further experimentation through the exercises, this is exactly like Action Script.

JavaScript Part One – Mad Scientist

I wanted to re-familiarize myself with pieces of coding I have been introduced to but not properly taught. First stop of the list is the humble JavaScript.

For my learning tools, I’ve chosen both Codecademy and Lynda.com. Codecademy served me very well when I was first learning HTML, so this is my service of choice.

The first function we are taught is a simple text to screen command.

console.log(“Hello!”);

This will display simply the word ‘Hello!’.

Next up are some key terms:

Photo 31-01-2018, 17 23 18

  • Strings – Any grouping of Keyboard characters (Letters, Spaces, Numbers or Symbols) surrounded by single quotes (‘) or double quotes (“).
  • Numbers – Any number, including numbers with decimals: e.g. 4, 1516, .002, 23.42.
  • Boolean – Either true or false with no quotations.
  • Null – Can only be null. It represents the absence of value.

Next up are math functions:

Photo 31-01-2018, 17 31 58

  • Add: +
  • Subtract:
  • Multiply: *
  • Divide: /

Ok, Data types and build-in methods:

photo-31-01-2018-17-35-19.jpg

Data Types:

  • Instance – and individual case (or object) or a data type.
  • Length – the number of characters in an instance. (Example: console.log(‘Hello’.length); will return 5.

Build-in Methods:

  • .toUpperCase() – returns a string in all capitals.
  • .startsWith() – returns a boolean based on the letter input in brackets.
  • .trim() – trims blank spaces in an instance.

Time for a little more math. It will come in handy, I know it will:

Photo 31-01-2018, 17 42 35

  • console.log(Math.random()); – returns a random number between 0 and 1.
  • console.log(Math.random()*50); – returns a random number between 0 and 50.
  • console.log(Math.floor(Math.random()*50)); – returns a random WHOLE number between 0 and 50.
  • console.log(Math.ceil(43.8)); = 44  – returns the smallest integer greater than or equal to a number. In this case 43.8.
  • Integer – A whole number
  • console.log(Number.isInteger(2017)); – returns a boolean based on weather the number in brackets is a whole number.

Commenting out! The most useful thing in programming! Especially for keeping notes when working.

Photo 31-01-2018, 17 51 06

Variables are a major part of JavaScript. The few times I needed JavaScript it was for functions. There are two major types of variables in JS. const and let.

  • const – short for constant, is a JavaScript keyword that creates a new variable with a value that CANNOT be changed.
  • let – Variables that can be reassigned.

For example:

const myName = ‘Arya’;

console.log(myName);

This will return: Arya.

  • myName – name of a variable, in this case a const variable.
  • = – assignment operator
  • Arya – Value assigned to variable.

When adding them all together, we can use +. For example:

let favoriteAnimal = ‘Fox’;

console.log(“My favorite animal is ” + favoriteAnimal + “.”);

This will return: My favorite animal is Fox.

What have we learnt so far (according to Codecademy):

  • Variables hold reusable data in a program.
  • JavaScript will throw an error if you try to reassign cont variables.
  • You can reassign variables that you create with the let keyword.
  • Unset variables store the primitive data type undefined.
  • Mathmatical assignment operators make it easy to calculate a new value and assign it to the same variable.
  • The + operator is used to interpolate (combine) multiple strings.
  • In JavaScript ES6, backticks (`) and ${} are used to interpolate values into a string.

Taking what I have learnt, I wanted to start to implement and experiment myself. However, when trying to get code to appear in Dreamweaver (the only program I’m familiar coding in), I found that I couldn’t get my simple code to appear.

Screenshot (151)

So now the task at hand is sorting this problem before moving forward. Searching through a few forums and found them a little tricky to navigate especially with horrible text formatting and a lack of visual explanation. This leads me to YouTube. First video found is clear but still doesn’t solve my problem.

While searching, I did discover the Codecademy forum which included a number of beginners projects to try once I have figured this out. Good to know.

Screenshot (153)

This next video I came across stated to show me a few things I didn’t know. Such as the alert function in HTML. Still something new, but not what I was learning in Codecademy. I shall quickly try what he has described.

Test run:

This worked fine. Now on to see if I can get the rest to work as I originally learnt it.

Success! I separated the JavaScript in my HTML code to it’s own file. alert.js. This was then linked to the HTML using http://alert.js and I recieved the same outcome. A pop up with ‘Hello!’. In hindsight, this should have been obvious to me. Still not the console.log(‘Hello!’); I wanted to use, but maybe I am getting too ahead of myself. Perhaps the function needs to be added to a text enabled div box to properly display. Will continue with JS lessons on Codecademy and try the projects listed in the forum.