Hyper-Text Markup Language; WYSIWYG.

Today I received the following question:

Hi Michael,

I have a school assignment to make a website about a topic I like, and would like to make a nature website. I am unsure how to code a website and the class isn’t really helpful, could you assist?

Also you’re so cool.

Thanks,
Jamie

I am paraphrasing, of course. I will answer this question, in the most simplistic and non-technical method possible. It’ll section this post into the following segments:

  1. Selecting an IDE;
  2. Confirming what “WYSIWYG” means;
  3. Confirming what “CSS” does and;
  4. Beginning the project.

Selecting Your IDE/Tool

The first thing you’re going to require is a text editor (or an “IDE“). I surmise you’re using Windows, and not Mac OSX (or any other operating system). In my opinion, a good  IDE will do for you:

  1. Will use HTML and CSS Syntax Highlighting;
  2. Will auto-complete (generally using TAB) the command and;
  3. Will “wrap” functions together.

On the other end of the spectrum, a bad IDE will not perform any of these functions. Whilst application such as Notepad, Wordpad and Word could act as a base for your HTML, I would recommend not using these.

To further demonstrate the difference between a good and bad editor; this is a basic text editor (Notepad):

npad

Notepad

There is no syntax highlighting, nor is there tabbed completion. Notepad++ on the other side has these features by default:

npadpp.PNG

Furthermore, Notepad++ takes it further with a tabbed completion function allowing you to see all available commands:

prp

Here is a list of available IDE’s available for free on Windows:

 


What is this “WYSIWYG” term?

What you see is what you get, in its acronymic form WYSIWYG, is defined as:

WYSIWYG (pronounced “wiz-ee-wig”) editor or program is one that allows a developer to see what the end result will look like while the interface or document is being created. – Source

Meaning that every alteration to the underlying HTML or CSS, such as making text bold, should replicate to a “live” view for you.

There are mixed answers on should I use a WYSIWYG editor if I am new to web-design, and my answer is this: if you’re more a visual learner, there is no harm using a WYSIWYG editor as it allows you to both edit code, and (generally) drag the content to suit.

To test this theory, the following “website” was made using the WYSIWYG Web Builder toolkit, and took me less than 2  minutes to perform:

wysiwyg.PNG

The HTML Code to this website can be viewed using the “View Source” option. The following is a snippet defining the Marquee component (the small box under the header):

<marquee direction="left" scrolldelay="90" scrollamount="6" behavior="scroll" loop="0"style="position:absolute;left:148px;top:65px;width:248px;height:38px;z-index:40;" id="Marquee1"><span style="color:#000000;font-family:Arial;font-size:13px;">Go on, it's free.<br></span></marquee>

So as you can see, there are large benefits to using a WYSIWYG editor (due to the lenght of the code), but ensure you understand the code before you rely on an editor.


What are “the basics”?

Before I begin with my own lesson, I will supply some amazing examples for you:

  1. HTML5 Introduction;
  2. HTML Document Tags;
  3. HTML5 Style Guide and Coding Conventions;
  4. HTML5 New Elements and;
  5. HTML Lessons

Now, you should be aware of Cascading Style Sheets (“CSS”);

A cascading style sheet (CSS) is a Web page derived from multiple sources with a defined order of precedence where the definitions of any style element conflict.

Or more simply put, defines tags applied to HTML. So before you begin, I would recommend do some planning on what each page does, and what you want it to look like. When creating a website locally, I like to edit my folder layout to be:

nanky@DESKTOP-52QRCAE:~/documents/website$ ls
/css /docs /images /pages /vid

The reasoning behind this is each folder has a clear purpose:

  • /css – is responsible for the CSS for the website pages;
  • /docs – my documents (more on this just below);
  • /images – is responsible for all the images in the site;
  • /pages – houses the HTML documents and;
  • /vid – for any videos stored on the site.

Documenting the process is very important in any project. Most people use GIT or Google Docs, but a basic Nano document will suffice.

Cascading Style Sheets “CSS”

Without CSS, you will find yourself with a basic ASCII website, with little to no style (not that this isn’t good). Before continuing, we need to have a slight argument:

External style sheet

External style sheets are just that, external to the HTML file and referenced in the code:

<link rel="stylesheet" href="https://www.url.of.housed.content-css">

Therefore allowing the CSS to live externally, and has easier version control.

Internal style sheet

Internal style sheets use the “Style” tag to define the tags, and are situated in the header portion of your HTML.

This is the most convenient method for me, however, has a few issues:

  • Larger HTML files and;
  • Harder to maintain.

Here is an example:

<style>
body {
    background-color: purply-blue;
}

h1 {
    color: grape-flavoured;
    margin-left: 420px;
} 
</style>

Psh… this is the format I traditionally use.

Inline style

Inline style sheets are style tags, in the actual format of the tags. For example”

<h1 style="color:red;margin-left:45px;">My Main Menu Heading</>

This ties the single “H1” tag to have the properties above mentioned. This is useful if you wish to override the default style of the “H1” tag.

The basics of CSS, hit me.

I will not go through all the tags you can use, and all the options for CSS (that would take me weeks of documenting), but I will tell you that there are a plethora of CSS examples online.

For example, let us set a tag for our three headings:

<style>
h1 {
 text-decoration: overline;
}

h2 {
 text-indent: 50px;
 text-decoration: line-through;
}

h3 {
 color: green;
 text-decoration: underline;
}
</style>

Then, we can go ahead and call the code:

<h1> Test </h1>
<h2> Indent! </h2>
<h3> Green! </h3>
h1

Resulting Code

This will apply to every tag defined in the CSS sheet. Let’s take YouTube’s “www-roboto” CSS for example:

@font-face{font-family:'Roboto';font-style:italic;font-weight:400;src:local('Roboto Italic'),local('Roboto-Italic'),url(//fonts.gstatic.com/s/roboto/v16/WxrXJa0C3KdtC7lMafG4dRTbgVql8nDJpwnrE27mub0.woff2)format('woff2');unicode-range:U+0460-052F,U+20B4,U+2DE0-2DFF,U+A640-A69F;}@font-face{font-family:'Roboto';font-style:italic;font-weight:400;src:local('Roboto Italic'),local('Roboto-Italic'),url(//fonts.gstatic.com/s/roboto/v16/OpXUqTo0UgQQhGj_SFdLWBTbgVql8nDJpwnrE27mub0.woff2)format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}@font-face{font-family:'Roboto';font-style:italic;font-weight:400;src:local('Roboto Italic'),local('Roboto-Italic'),url(//fonts.gstatic.com/s/roboto/v16/1hZf02POANh32k2VkgEoUBTbgVql8nDJpwnrE27mub0.woff2)format('woff2');unicode-range:U+1F00-1FFF;}@font-face{font-family:'Roboto';font-style:italic;font-weight:400;src:local('Roboto Italic'),local('Roboto-Italic'),url(//fonts.gstatic.com/s/roboto/v16/cDKhRaXnQTOVbaoxwdOr9xTbgVql8nDJpwnrE27mub0.woff2)format('woff2');unicode-range:U+0370-03FF;}@font-face{font-family:'Roboto';font-style:italic;font-weight:400;src:local('Roboto Italic'),local('Roboto-Italic'),url(//fonts.gstatic.com/s/roboto/v16/K23cxWVTrIFD6DJsEVi07RTbgVql8nDJpwnrE27mub0.woff2)format('woff2');unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB;}@font-face{font-family:'Roboto';font-style:italic;font-weight:400;src:local('Roboto Italic'),local('Roboto-Italic'),url(//fonts.gstatic.com/s/roboto/v16/vSzulfKSK0LLjjfeaxcREhTbgVql8nDJpwnrE27mub0.woff2)format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:'Roboto';font-style:italic;font-weight:400;src:local('Roboto Italic'),local('Roboto-Italic'),url(//fonts.gstatic.com/s/roboto/v16/vPcynSL0qHq_6dX7lKVByfesZW2xOQ-xsNqO47m55DA.woff2)format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto Regular'),local('Roboto-Regular'),url(//fonts.gstatic.com/s/roboto/v16/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2)format('woff2');unicode-range:U+0460-052F,U+20B4,U+2DE0-2DFF,U+A640-A69F;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto Regular'),local('Roboto-Regular'),url(//fonts.gstatic.com/s/roboto/v16/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2)format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto Regular'),local('Roboto-Regular'),url(//fonts.gstatic.com/s/roboto/v16/-2n2p-_Y08sg57CNWQfKNvesZW2xOQ-xsNqO47m55DA.woff2)format('woff2');unicode-range:U+1F00-1FFF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto Regular'),local('Roboto-Regular'),url(//fonts.gstatic.com/s/roboto/v16/u0TOpm082MNkS5K0Q4rhqvesZW2xOQ-xsNqO47m55DA.woff2)format('woff2');unicode-range:U+0370-03FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto Regular'),local('Roboto-Regular'),url(//fonts.gstatic.com/s/roboto/v16/NdF9MtnOpLzo-noMoG0miPesZW2xOQ-xsNqO47m55DA.woff2)format('woff2');unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto Regular'),local('Roboto-Regular'),url(//fonts.gstatic.com/s/roboto/v16/Fcx7Wwv8OzT71A3E1XOAjvesZW2xOQ-xsNqO47m55DA.woff2)format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto Regular'),local('Roboto-Regular'),url(//fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2)format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(//fonts.gstatic.com/s/roboto/v16/ZLqKeelYbATG60EpZBSDyxJtnKITppOI_IvcXXDNrsc.woff2)format('woff2');unicode-range:U+0460-052F,U+20B4,U+2DE0-2DFF,U+A640-A69F;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(//fonts.gstatic.com/s/roboto/v16/oHi30kwQWvpCWqAhzHcCSBJtnKITppOI_IvcXXDNrsc.woff2)format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(//fonts.gstatic.com/s/roboto/v16/rGvHdJnr2l75qb0YND9NyBJtnKITppOI_IvcXXDNrsc.woff2)format('woff2');unicode-range:U+1F00-1FFF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(//fonts.gstatic.com/s/roboto/v16/mx9Uck6uB63VIKFYnEMXrRJtnKITppOI_IvcXXDNrsc.woff2)format('woff2');unicode-range:U+0370-03FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(//fonts.gstatic.com/s/roboto/v16/mbmhprMH69Zi6eEPBYVFhRJtnKITppOI_IvcXXDNrsc.woff2)format('woff2');unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(//fonts.gstatic.com/s/roboto/v16/oOeFwZNlrTefzLYmlVV1UBJtnKITppOI_IvcXXDNrsc.woff2)format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(//fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2)format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215;}@font-face{font-family:'Roboto';font-style:italic;font-weight:500;src:local('Roboto Medium Italic'),local('Roboto-MediumItalic'),url(//fonts.gstatic.com/s/roboto/v16/OLffGBTaF0XFOW1gnuHF0TTOQ_MqJVwkKsUn0wKzc2I.woff2)format('woff2');unicode-range:U+0460-052F,U+20B4,U+2DE0-2DFF,U+A640-A69F;}@font-face{font-family:'Roboto';font-style:italic;font-weight:500;src:local('Roboto Medium Italic'),local('Roboto-MediumItalic'),url(//fonts.gstatic.com/s/roboto/v16/OLffGBTaF0XFOW1gnuHF0TUj_cnvWIuuBMVgbX098Mw.woff2)format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}@font-face{font-family:'Roboto';font-style:italic;font-weight:500;src:local('Roboto Medium Italic'),local('Roboto-MediumItalic'),url(//fonts.gstatic.com/s/roboto/v16/OLffGBTaF0XFOW1gnuHF0UbcKLIaa1LC45dFaAfauRA.woff2)format('woff2');unicode-range:U+1F00-1FFF;}@font-face{font-family:'Roboto';font-style:italic;font-weight:500;src:local('Roboto Medium Italic'),local('Roboto-MediumItalic'),url(//fonts.gstatic.com/s/roboto/v16/OLffGBTaF0XFOW1gnuHF0Wo_sUJ8uO4YLWRInS22T3Y.woff2)format('woff2');unicode-range:U+0370-03FF;}@font-face{font-family:'Roboto';font-style:italic;font-weight:500;src:local('Roboto Medium Italic'),local('Roboto-MediumItalic'),url(//fonts.gstatic.com/s/roboto/v16/OLffGBTaF0XFOW1gnuHF0b6up8jxqWt8HVA3mDhkV_0.woff2)format('woff2');unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB;}@font-face{font-family:'Roboto';font-style:italic;font-weight:500;src:local('Roboto Medium Italic'),local('Roboto-MediumItalic'),url(//fonts.gstatic.com/s/roboto/v16/OLffGBTaF0XFOW1gnuHF0SYE0-AqJ3nfInTTiDXDjU4.woff2)format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:'Roboto';font-style:italic;font-weight:500;src:local('Roboto Medium Italic'),local('Roboto-MediumItalic'),url(//fonts.gstatic.com/s/roboto/v16/OLffGBTaF0XFOW1gnuHF0Y4P5ICox8Kq3LLUNMylGO4.woff2)format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215;}

Far too much data to try and explain on a post – this will all come with time. (Yes I know it is simplistic code for those who know how to do this, that’s not the point).

Here are a few basic reference points you might like:


What is HTML, and how do I use it?

If you are unsure what HTML is (and I’d hope not!) it stands for Hyper Text Markup Language:

Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages. – Source

Basically, it is the “language” used to interpret websites and render them within browsers.

Hint: On Chrome? Press Ctrl + Shift + J and go to Elements, it will show you live HTML of this blog.

Before diving in, there are a few core statements about HTML:

  • Whenever you <open> a bracket, </close> it. Get it?
  • Try to make the code readable, add comments <! — comment –>

So without further delays, jump in and read the HTML Reference guide.

I will list a few examples of basic codes you will need.

br

The BR tag is a break entry, and allows you to string text across multiple lines:

<p> This is a paragraph. </p>
<p> This is a paragraph, <br>
across multiple lines</p>

b, i and u

Most likely depreciated (Last time I did a website was 4 years ago), these tags format text:

<p style="color:red;margin-left:20px;"> <u>Julie</u>:<b> Michael </b> you're such a <u><i>cool</u></i> dude, <br>
<i> dude.</i>
</p>

See how I added inline styling to the text, as well?

table, tr and td

Editing tables is easy. TR is table tow, and TD is the table cell:

<style>
table, th, td {
 border: 2px solid black;
}
</style>
</head>
<body>
<table>
 <caption>Should we eat cookies?</caption>
 <tr>
 <th>Yes</th>
 <th>Then eat</th>
 </tr>
 <tr>
 <td>No?</td>
 <td>Don't touch</td>
 </tr>
 <tr>
 <td>Hell Yeah</td>
 <td>Eat them all!</td>
 </tr>
</table>
</body>

Note the “caption” tag adds a title to your table, should you wish it!

PHP? XML? Javascript?

Do not even concern yourself with this at present. If you’re really interested in learning, this is something you should pursue.


To summarise Jamie (and I apologise, this is not my best writing at 2am, but it’s the only time I had free), get yourself a good IDE tool (Brackets!) to make yourself familiar with syntax (it really helps highlight when you’ve not closed a tag correctly!) and tags.

Then, draw out how you want the website to look. Perhaps try using a WYSIWYG Editor and deconstruct the code to get an understanding of it.

Lastly, please use external CSS sheets in the beginning, and don’t go too complex. If you’re up late at night coding, always use the <!— This code does this —> command to ensure tomorrow, you remember what it is.

There are a plethora of tools out there to help you, from Videos to tutorials online, so have patience and catch up. Do your CSS first, set the ground before the building. If you get stuck, reach back out to me.

 

For others who want more explicit information on a topic (I am happy to expand this post if you really want), or corrections, use the following form:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s