From Photoshop to wordpress tutorial: February 2015

Thursday, February 12, 2015

HTML basics

First of all, we have to know what is a html
HTML stands for HyperText Markup Language
It is a labguage which describes a web page. You can set the parameters for documents, images position, text height, background color, text color.

HTML is simply textual code which is made of explanations for the browser, how to open and show that page. These explanations can be set with the tags that must be written inside the brackets <code>. Here is the example:

This is the <b> bold </b> parameter for the text in web page.

It will look like this :
This is the bold parameter for the text in web page.

These textual codes are easy to write or edit in any text editor, even in your windows notepad. But there are some editors that can help you, notepad++ is a very helpful one, because it visually makes it easier to you to see where is the beginning and the end of the code you are editing.

If you find this complicated, you can use some of editors which can make you easier to you to place the design in a way you want without knowing html codes. Some tools you need are Dreamweaver and Frontpage. These editors are so-called WYSIWYG, which means What You See Is What You Get

Let me say that although you don’t need to know any html to work in these WYSIWYG tools, it is still of great importance to know html language, so you can edit the code and place the design in more accurate way.
Every html page you make, must have .html or .htm extension. This way browsers recognize your pages, and show them in a way you want.

After you create your web page, you need a web hosting, your domain and a FTP program.

Web hosting is a physical place (hard drive) which is connected with the internet all the time using some server configuration.

Domain name is also important. It points someone who write it in a browser to your web page. Once you buy it, you have to set nameservers on it, which connects domain name with your hosting.

FTP program lets you easily move your web pages you create from your computer to your hosting.

Wednesday, February 11, 2015

Elements & Attributes

Elements in html

There are three elements every html consists of:

Opening tag
Element
Closing tag

Example:
<head>
<title>my page</title>
</head>
<body>
my text
</body>
</html>

It should look like this:

<b>

This text is bold

</b>

This text is bold

Elements

· Html

· Head

· Title

· Body

<Html>

With this element should start every web page

<Head>

This tag should take place inside the head tag

Browser don’t show the elements in this tag, but these elements are very important for browsers and search engines. Here will stand the title tag, description tag…

<Title>

This element consists of the title of your web page, and as stated before, is very important for the web browsers.

This element takes place inside of the head tag.

<Body>

Tis element consists of other elements which makes the page, so everything inside will be shown in the browsers.

<html>

Attributes

Html attributes are used to set attributes for elements. There are several attributes, and some of them are:

· Class or ID attribute

· Name attribute

· Title attribute

· Align attribute

· Valign attribute

Class or ID atribut

These attributes are here to set points that we will call later in CSS file, and set styling for each.

So if we have class attribute for post, we will set in CSS its background, font color, post title color and size, text size, image width… So in html we just set tag: <div class=”post”>, write text, set image, set title…

Name attribute
Name attributes are assigned to set name for something, for example for the text field:

Name: <input type="text" name="name">
Last name: <input type="text" name="last name">

Title attribute

This attribute gives the tittle of the segment you are writing:

Now you have set tittle for the text “this is my text” which is visible. When you take your mouse pointer over this text, little pop up will show text “Learning html”.

Align attribute

Align attribute is used for setting text position, image position…

This way we pushed second line of text to the left, centered first line, and pushed third line to the right.

Valign attribute

This attribute is the same as the align attribute, but defines vertical allignement in tables.

Tuesday, February 10, 2015

Comments, formating, links

Comments

Comments are used for the text that helps you to write codes.

For example, it is very easy to modify your html code, once you wrote it, if at the end of every opening tag, you wrote comment where you made a statement what tag is closed.

Also you can write comment tag and set the code you don’t want to remove, but deactivate it, inside the comment. This way you can activate this code later.

You can set a comment to yourself somewhere in the code, perhaps if you want to change the code later…

And you can set a comment in a code, like a note, if you are working in a team, so that someone from the team opens the code, sees the note…

Some text

</body>
</head>
</html>

Formating

Html uses tags. These are some tags that can be used for formatting:

<p> paragraph tag </p>
<b> bold text </b>
<em> italic text </em>
<strong> "strong" text </strong>
<i> italic text </i>
<sup> upper text </sup>
<sub> lower text </sub>
<del> strikethrough text </del>
<code> code text </code>

We use this tags because it is possible to call them later in CSS.

Perhaps we have set the paragraph tag for all the texts on your page. You can later set in CSS that all the paragraphs will have size 9px and color blue.

-font size:

Font sizes from 1-7

-text color:
-there are several ways to set the text color:

<font color="#770000">this text is hexacolored #770000</font>

using hexacolor

or using color name

-font type:

<font face="Bookman Old Style, Book Antiqua, Garamond">this paragraph has changed font </font>

-First letter:

<font size="5" face="Georgia, Arial" color="blue">F</font>irst letter

Monday, February 9, 2015

Images in html

Images

You can add images to your page by adding a following HTML code:

Address of image from previous code can be defined in a few different ways:

src="rabbit.png" - if image is found in same directory like HTML page

src="...../rabbit.png" - if image is found in directory that consists HTML page directory also

src="../pictures/rabbit.png" - if image is found in directory "pictures" that consists HTML page directory

Alternative text/attribute

In cases when image could not be loaded in browser, alternative text will be shown inside image. In our case, that is a word rabbit.

Image formatting

- Height and width

If you want to define image size instead of browser, you should use code above. This can be useful when your page starts falling apart due to image and text size slow loading.

- Vertical and horizontal alignment

align (horizontal)

-right

-left

-center

valign (vertical)

-top

-bottom

-center

This is a list of possible image alignments. You can see how it looks like in practice on following code:

<p>

this is a text that will go right under the image

</p>

Rabbit

Linked images

</a>

When using this code browser will show up the image that will lead to tasked website when clicked on it.

</a>

With this code you have set that there will be no borders around image. If you want to use frame for your image just use another number instead of 0.

</a>

This code will show smaller version of your image (called thumbnail) that will be linked to a bigger page. You need to create smaller thumbnail image, of course.

Thumbnails could be used so that page is running faster or because it seems nicer with thumbnail instead of regular size image. Thumbnail can be linked to a full quality picture.

Images as links

Code example that will convert image to a link to desired page.

Code example that will show thumbnail image which links to a bigger image.

Sunday, February 8, 2015

Lists

There are 3 different types of lists. <ol>, <ul> and <dl>.

<ul> - unordered list with dots

<ol> - ordered list with numbers or letters

<dl> - definition list with dots

Ordered list

Between <ol> and </ol> you put <li>....</li> elements of a list. Each <li> represents one element of ordered list.

Colours:

<ol>

<li> black </li>

<li> white </li>

<li> orange </li>

<li> purple </li>

</ol>

As a result:

Colours:

1. black

2. white

3. orange

4. purple

5. blue

You can also choose other characters instead of numbers:

If you use the example from above with <ol type="A">, here is a result

A. black

B. white

C. orange

D. purple

E. blue

Unordered list

An unordered list starts and ends with <ul> tag. Each list item starts with the <li> tag.

The list items could be marked with bullets (small black circles), squares or you can add no item for you list items.

For example, HTML code for unordered list would look like this:

<li> black </li>

<li> white </li>

<li> orange </li>

<li> purple </li>

</ul>

And here is a result:

· black

· white

· orange

· purple

· blue

Description list

A description list is a list of elements with description for each element within it. In description list, <dl> tag is tag that defines description list, while <dt> defines a term or name and <dd> defines a description for every <dt> tag or element.

Here is an example of description list:

<dl>

<dd>- man's best friend</dd>

<dd>- producing a milk</dd>

<dt>Chicken</dt>

<dd>- gives us eggs</dd>

</dl>

And here is a result:

Dog

- man's best friend

Cow

- producing a milk

Chicken

- gives us eggs

Saturday, February 7, 2015

Tables in html

Tables could often cause problem to newbies and it could be very hard to understand and learn them.

To create a table we use tag <table>. In that tag there are tags <tr> (row) and <td> (cell) in HTML table. Here is an example of one table with 2 rows and 2 columns:

<tr>

<td>First row and first column</td>

<td>First row and second column</td>

</tr>

<tr>

<td> Second row and first column</td>

<td> Second row and second column</td>

</tr>

</table>

Tables in html

In this way if we have one row in first cell and in second row there are two cells.

Here is an example:

<tr>

<td>First row</td>

</tr>

<tr>

<td>Second row</td>

</tr>

</table>

Rowspan numbered 2 means that there are two rows in one cell. When you have two rows and one cell in one row and two cells in second row then you use colspan tag. Here is an example:

<tr>

<td colspan="2">First row</td>

</tr>

<tr>

<td>First cell</td>

<td>Second cell</td>

</tr>

</table>

Cellspacing

You should use cellspacing for spacing between borders of tables. Look at this example:

<tr>

<td colspan="2">First row</td>

</tr>

<tr>

<td>First cell</td>

<td>Second cell</td>

</tr>

</table>

Cellpadding

Cellpadding is used for spacing between text and borders of tables. Look at this example:

<tr>

<td colspan="2"> First row</td>

</tr>

<tr>

<td>First cell</td>

<td>Second cell</td>

</tr>

</table>

Friday, February 6, 2015

Color in html

Background color

Background color or just bgcolor as attribute is used for changing of color for background of whole HTML page or separate parts like tables. Bgcolor could be set on differ places in HTML elements but it is suggested that you use bgcolor tag for whole page background and for tables CSS should be used.

Here is an example how to change background color on your page:

<body bgcolor="blue">
Background color is set.
</body>

HTML system of colors - color names

Here is something about colors you can use in HTML. There are 3 different ways how to setup background colors. Easiest and most common way is to set one of most used colors. (example: blue, green, red, silver, black, yellow...)

Here are 16 basic colors:

Other way is hexadecimal way for coloring. Here is an example:

<body bgcolor="#006699">
Background color is set.
</body>

Third way for coloring includes RGB values:

<body bgcolor="rgb(0,0,255)">
Background color is set.
</body>

Third way for background color is not recommendable.

Here is an example for background color for table

<table bgcolor="#006699" border="1">
<tr>
<td>A shade of blue</td>
</tr>
</table>

With this knowledge you can change your background color, color of parts of your page or tables. Feel free to learn various methods and apply them in every way you need.

Image as background

Background image could be used for all kinds of elements (tables, segments, body etc). You can use HTML to make image as a background but usually you should do it in CSS, when you learn it.

Here is an example how to setup image as background in separate table using HTML.

<table height="300" width="420" background="http://www.psd-wordpress.blogspot.com/Images/image.png" >
<tr>
<td>This table has background image</td>
</tr>
</table>

For background images, due to differ sizes of images, you should use Patterneo or some other program that will fully fit your image to background.

Thursday, February 5, 2015

Meta tags in html

Meta tags are always set between <head> and </head> tags. Every HTML document starts with following coding line:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

- Code description -

- Explains browser type that will read your HTML page.

- Code description –
- Page refresh each 60 seconds. If you want to change period in which your page will refresh, change number 60 to desired number. It will only happen if you remove URL= http://www.google.com. Also if you want to change to another website after refresh, just simply enter URL of your page.

- Code description –
- Keywords that are used by web browser. In content=”..." enter your keywords which will best describe your website.
- Do not think that keywords will let your website go on front page in search. It is a whole new area apart from HTML and coding and it is called SEO (Search Engine Optimization).

- Code description –
- If you add this code to your <head> page, it will allow you to enter specific language you use.

- Code description –
- Enter your name or personal details

- Code description –
- Enter your description of your website, its purpose or activities. Feel free to write it down in 160 characters

Tuesday, February 3, 2015

Coding html

First of all you need to download notepad++.

Ok, now set in the first line DOCTYPE, so the browser nows whats the content about..

After this part you should open html tag <html> and close it </html>. Between this two tags you should place everything that one site shoul consist of.

Start with the head tag <head> and than colose it </head>.
Here you should put some information that are important for the browsers, and are not visible. Remember head tag is not tag for header, dont get confused by this..
So here put the title tag and here we write the title of our website..
Than you should put meta tag for the content type and set it to be text/html.
Also you should link your style CSS file with this html document, later when we write CSS, the changes will directly affect our html document.
Here is the preview of these tags:

head tag for html

After these steps we should take a look at our psd design.
We can see here that there is a wrapper in which is everything contained..

Highlighted area is a wrapper

So we set the wrapper tag.

We can now see that our site is divided to a header section, and body section.
In header section we have logo, navigation and tagline. For the logo we will just add anchor which we will call in CSS later, and set background, position, width, height..
Navigation is a list, but we can see in our design that there are some icons next to home and contact.
ul code stands for unordered list, li code stands for list.
We will insert these images here in html document.
Also, we need to set an anchor for the tagline.
Now we close header tag. It is very good for the clearance of your code to put the comment tag after every closed tag. In this case we will put the comment "End header tag".
This should be it, the header is complete.

Header section

In the design we can see that in the main section of the website, there are left and right sections.
We will call them primary and secondary section.
In the primary section we have three posts, which have the same styling.
So instead of div, we will call them class. The main and only difference is that div stands for unique element, and div can be called in CSS only once. Class item stands for similar elements which can be called as many times as there are elements on the site.
Inside the class tag we will set tags for all elements: picture, title of the post, meta tag, text and read more tag.
Picture will be imported via the img tag, tag for this title will be h2, meta again as a class, text with p code, and read more as a link.

primary section

Repeat this step for post two and three.

In the secondary section, we have some sidebar boxes which will have class tags aslo.
We will set here tags for image, title and arrows.

secondary section

And thats it, just save this file as index.html in the root of your site folder.

See the next step creating CSS file.