HTML Attributes

Previously, much design was created directly via HTML. The design was accomplished with attributes in the corresponding HTML tags. Thus, for example, color, and alignment of text (left, right, center). This should be urgently refraining in the philosophy of HTML (also to avoid unnecessary work). The philosophy states that a separation between content structure and design should be made. HTML is responsible for the content and the structure and CSS to 100% for the design.

The good news is that by the separation of content (HTML) and design (CSS) you save yourself a lot of time learning HTML and CSS. It has become really easy. We have very few attributes.

Building attributes

The attributes are built in two parts. First come the attribute name and then the attribute value. After the attribute name comes an equal sign and the attribute value is enclosed in quotation marks.

The closing tag is always without the attributes.

You can add more than one attribute to a tag, only separated by a space

The link attribute

As example I show you the construction of a link attribute. We start with a tag that needs always an attribute: <a> = anchor tag (link),

The attribute is href = hyper reference

The attribute value is the address were you want to be anchored (linked)

<a href=”address”> Text </a>

The address can be an internal or external link or a specific word(s) on the same page.

Internal link

You don’t need to write the whole URL address but only the page or post name with the first / (dash):

<a href=”/mypost/”> click here </a>

External link

Here you need to write down the whole URL:

<a href=”/http://website.com/thepost/”> click here </a>

To set an anchor link inside a page beside the link you must set the anchor place (word or sentence).

The anchor link to the anchor place "Chapter 2":

More information in <a href="#chapter2"> Chapter 2 </a>

The anchor place:

<a id="chapter2">Chapter 2<a/>

There are a lot of more attributes, but if you make your design with CSS, you probably don’t need those in WordPress.

If you want to learn more on HTML you can do it here: http://www.w3schools.com/html/

If you think that this tutorial is help- and useful, give me your comments. In the next tutorial I will treat CSS style codes.

Thank you for your attention.

Guy



Join the Discussion
Write something…
Recent messages
Karyskis Premium
Great information!! Thank you, giludi.
Reply
giludi Premium
Thanks a lot for reading and following.
Reply
Wayne Wallace Premium
Already started promoting with a link outside of WA
Reply
giludi Premium
Thanks a lot I do appreciate your help and for sure your tutorials.
Reply
Wayne Wallace Premium
Thanks just did a video tutorial about your link
Reply
KatieMac Premium
Thank you one to keep for going back to
Reply
giludi Premium
Hope I gave you some help.
Reply
KD6PAO Premium
Well done Guy...much appreciated as I am a techie!
Reply
giludi Premium
Thanks a lot for the compliments.
Reply
KD6PAO Premium
Just fact my friend!
Reply
webBIZ44 Premium
Hello Guy! Great training! As someone who knows nothing about HTML or CSS this is perfect for introducing these concepts to me! Thank you for your hard work in putting this together.
-Joe
Reply
giludi Premium
Hope to give you some more information, will be back soon with new training. Thanks for the comment.
Reply
Top