Categories
html-css-fundamentals

Anatomy of an HTML element

Understanding the Anatomy of an HTML Element is a very basic and fundamental requirement if you claim yourself to know and work in HTML CSS. This post will be a part of my series of posts titled “Fundamentals of HTML CSS” (coming soon).

Before we begin Click here if you wish to learn HTM CSS for free?

What are we going to learn from this post?

    Anatomy of an HTML element – Basics

    Before we understand the anatomy of an HTML element we need to understand some basics.

    1. What is an HTML Element
    2. Types of HTML Elements

    What is an HTML Element?

    HTML elements are the building blocks of HTML document. You make use of an HTML element to insert any piece of information let it be a page heading, sub heading, a description, a list or an image.

    Another definition from wikipedia
    An HTML element is a type of HTML (Hypertext Markup Language) document component, one of several types of HTML nodes (there are also text nodes, comment nodes and others). … Each element can have HTML attributes specified. Elements can also have content, including other elements and text.

    HTML Element
    Example of an HTML Element

    HTML elements are also referred as HTML tags.

    Some of the examples of HTML elements are as follows

    • <html>
    • <head>
    • <body>
    • <h1>
    • <p>
    • <img />
    • <br>
    • <hr>

    Types of HTML Elements

    Basically there are 2 types of HTML elements.

    1. Pairing HTML element
    2. Empty or Inline HTML element

    Pairing HTML elements

    Pairing HTML elements have an opening and closing tag. they have the content in between. Lets take a look at an example of a pairing html element below:

    <h1>This is my page header</h1>

    As you can see the code above, we are making use of a <h1> tag that has some content and a following closing tag.

    Some examples of pairing html element

    • <html>
    • <head>
    • <body>
    • <p>
    • <h1>
    • <h2>
    • <h3>
    • <h4>
    • <h5>
    • <h6>
    • <ol>
    • <ul>
    • <li>

    Empty or Inline HTML Elements

    Empty or Inline HTML Elements do not have a opening or a closing tag, instead are self closing. Lets take a look at a few examples of empty or closing HTML element.

    <hr />

    The above code is an example of an <hr> element which is used to generate a horizontal line (divider) between 2 html elements.

    Here is another example of an empty or inline html element

    <img src="" />

    The above code is an example of an <img> element which is used to insert an image in a html document.

    Some examples of Empty or Inline html elements

    • <img />
    • <hr />
    • <br />

    Now that we have understood what is an HTML element and its 2 types. Lets us now understand the Anatomy of an HTML element

    Anatomy of an HTML element – the paragraph tag

    Anatomy of an HTML element - the paragraph tag
    Image Source – https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
    <p>My cat is very grumpy</p>

    The above code is an example of pairing html element ie. the paragraph element

    This code will render “My cat is very grumpy” in your html document when viewed in the browser.

    As you can see the above code comprises of the following 3 parts:

    The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins or starts to take effect — in this case where the paragraph begins.

    The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.

    The content: This is the content of the element, which in this case, is just text.

    The element: The opening tag, the closing tag and the content together comprise the element.

    Anatomy of an HTML element – HTML Attributes

    Both the types of html elements can have attributes.

    Attributes contain extra information about the element that you don’t want to appear in the actual content.

    Let’s take a look an example of the paragraph tag with an attribute.

    HTML Attributes
    Image Source – https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics

    In the example above the paragraph tag has an attribute named “class” that has a value=”editor-note”.

    An attribute should always have the following:

    • A space between it and the element name (or the previous attribute, if the element already has one or more attributes).
    • The attribute name followed by an equal sign.
    • The attribute value wrapped by opening and closing quotation marks.

    Please note, an element can have multiple values separated by a space.

    Anatomy of an HTML element – image tag

    Here is an example an empty html element with multiple attributes.

    Anatomy of an HTML element - image tag
    Image Source – https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
    <img src="images/firefox-icon.png" alt="My test image" />

    The code above is an example of an Image tag that has 2 attributes:

    1. The “src” attribute which is an acronym of “source” specifies the path and name of the image that needs to be displayed.
    2. The “alt” attribute which is the acronym of”alternate text” specifies what text to show incase if the image does not appear for whatever reason.

    An image tag can more attributes that we can study with our tags lesson.

    Anatomy of an HTML element – Nesting in HTML

    Nesting means you can have elements inside elements.

    Lets take a look at the example below:

    Nesting in HTML
    Image Source – https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
    <p>My cat is <strong>very</strong> grumpy</p>

    In the code we have nested a <strong> element inside the <paragraph> element.

    This is because I wanted to insist on the word “very” and to make it look bold.

    Another example of Nesting is the list element. Lets take a look at the code below:

    <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    </ul>

    In the code above <ul> is the parent tag for an unordered list and <li> called as list elements are the child elements of an unordered list.

    A <li> element should always be nested inside a unordered (<ul>) or a ordered (<ol>) list element

    Please note : Nesting is only possible with Pairing elements and not with empty elements.

    Wrapping up

    I hope the examples above have cleared your fundamentals about the Anatomy of an HTML element.

    Stay tuned for more similar articles on the Fundamentals of HTML CSS.

    Categories
    html-css-tutorials

    How to include CSS in HTML

    Did you know “How to include css in html” is one of the most commonly asked HTML CSS interview questions during interview.
    You need to be fundamentally very clear on the different ways to include css in html page

    How to include css in html
    how to include css in html

    In this post I will show you the different ways on how to include css in html file and the difference between each method.

    Prerequites:
    You have a basic understanding of what is HTML and you also know what is CSS.
    Assumption is you already have an html page where you want to include css.

    Tools needed:
    An HTML Editor. You can use any html editor installed on your system or you can use any of the online html css editors. 
    A browser of your choice to see you output.

    I am using the online editor glitch.com in google chrome browser so that this is the only thing I need.


    Different ways on how to include CSS in HTML

    Basically there are 3 different ways to include CSS in HTML

    1. By linking an external css file
    2. By writing internal css in html page
    3. By writing Inline CSS in html page

    Let’s look at each of these methods one by one with practical implementation. 


    How to include css in html: Link External CSS

    Method 1 : How to link a CSS file to HTML

    This is the ideal and the most preferred method. 
    In this method you put all your styles in a different css file and load the styles by linking the css file into your html documents.

    You can do this by either linking a files on your own system/server or your link from a different source.

    Link a css file from your local system or server.

    This css file can reside in your local project directory of your local system or on your own server.
    The screen shot below is the source code of your html document.

    How to include css in html - HTML Document
    How to include css in html – HTML Document

    The screen shot below is the source code of your style.css file

    External CSS File
    How to include css in html – External CSS File

    Below is the code to link an external css file. Make the sure the css file is in the same directory.

    All you need to do this is put this code in the <head> tag of your html document. Make sure you have a file named styles.css in your system

    <link rel="stylesheet" href="/style.css">

    Can you see the text color of the heading “hi There!” is blue. 
    This is because we are setting the css property of the text color of h1 element to #373fff in our style.css file.

    h1{
     color:#373fff;
    }

    Link an external css from a different source

    You can also link an external css from a different source.
    Look at the screenshot below. In this example the code highlighted shows how to to link an external css from a bootstrap server. 

    How to include css in html - Link External CSS
    How to include css in html – Link External CSS from a different source

    Did you noticed how the color of the heading has changed to ‘black’ color and the all the margin is gone.
    This is because we are loading styles from the bootstrap.min.css.

    Benefits of External CSS

    While there are many benefits of this method, here are some of the most obvious ones:

    • You separate styles from markup
    • Developers/Engineers do not need to bother and work on your css files 

    This method is same as the following methods:

    • how to connect css to html
    • how to connect html to css
    • how to attach css to html
    • how to reference css in html

    How to include css in html: Internal CSS

    Method 2 : How to add internal css in html page

    In this method you write the styles in the head tag of the html page itself. 

    Let’s take a look at the screenshot below:

    Internal CSS
    How to include css in html – Internal CSS

    As you can see I added some styles for the h1 element within the style tag of the page itself.
    Can you see how the text color of the heading changed to black.
    This is because of the css styles written in the page.

    What we learnt now that styles written in the style tag of the page will override the styles coming from external css.

    Internal CSS takes precedence over External CSS rules

    It over rides the styles written in the external css files

    When to use Internal CSS

    • For a single page website
    • If you do not have access to external css file 
    • If you need to make some changes to reflect only on a single page

    This method is same as the following methods:

    • how to insert css in html
    • how to apply css to html

    How to include css in html: Inline CSS

    Method 3 : How to write Inline css in html

    In this method you write the styles in the element tag itself.
    Let’s take a look at the screen below to see inline css in action.

    How to include css in html - Inline CSS
    How to include css in html – Inline CSS in html

    Can you see the color of the header has changed to ‘red’. This is because we have added an inline style in the h1 element itself.

    When to use inline style

    • When you want a small change to take place on a particular element and you have access to HTML file.
    • For quick fixes
    • When you do not have access to external css files
    • In emergency when you are not familiar with main external css file
    • Inline CSS are a standard practice for HTML emailers
    • Use inline css for a single page website where each element has different styles

    Which styles takes precedence over what?

    As you notice this document has 3 styles defined for the text color of the header:

    • Color ‘blue’ defined in the external css file
    • Color ‘black’ defined in the internal style tag
    • Color ‘red’ defined in the inline style.

    And the final color of the header text is red. This is because:

    Inline CSS takes precedence over Internal and External CSS rules.

    Inline css over rides the styles written in the internal styles and external css files

    Where to put css in html

    Wondering where to put css in html?
    It all depends on the methods you choose on how to include css in html.

    • If you are planning to use Method 1 ie. an external css, you obviously write your styles in the external css file and link the file in your html page to load the styles.
    • If you are planning to use method 2  ie. internal css method, you write the styles inside a style tag in the head element of your html page.
    • If you prefer inline css method than you write the styles in the element tag itself

    How to import CSS in html

    Importing a css is not very different from linking an external css.
    You can import CSS in html using either of the 2 methods below

    Import as a string

    @import "navigation.css"; /* Using a string */

    or Import as URL

    @import url("navigation.css"); /* Using a url */

    Know the Difference Between @import and <link>


    Try yourself on how to include CSS in HTML

    The best way to learn is to do by yourself. Below is the link to the sample code I have shared in this article. Feel free to play around.

    https://glitch.com/~-how-to-include-css-in-html


    Wrapping up

    In this post we learnt the 3 different methods of how to include css in html.
    I hope this post has answered your question and clarified all your doubts in regards to how to include CCS in html document.

    Please share this post if you have found this helpful.

    Feel free to leave feedback in the comment sections. Also let me know if you would like help on more such articles.

    Categories
    Uncategorized

    Learn HTML CSS for free

    Do you know HTML CSS are the basic skills needed if you are planning to enter the web development field.
    Do you know anyone with basic computer skills, having good command on english and a flair for learning can learn HTML CSS for free and start building web pages.

    Are you scared of coding?
    Not sure how and where to begin learning html css for free?

    Learn HTML CSS for Free
    https://blog.hyperiondev.com/index.php/2018/05/17/should-i-learn-html-css/

    This post is a guide for anyone who wishes to learn html css for free and kick start their career in the web development field.

    HTML CSS is also a nice to have skill if you are a Graphic Designer or a User Interface Designer or a User Experience Designer.
    It is also helpful for content writers as they work with different Content Management systems which requires them to do some basic editing in the code.

    This post consist of 2 parts.

    Table of content to Learn HTML CSS for free

    • What is HTML
    • What is CSS
    • What is the difference between HTML and CSS
    • How to learn HTML and CSS
    • HTML CSS Tutorials
    • HTML CSS Editors
    • HTML CSS Interview Questions
    • HTML CSS Jobs

    At the end of the post I will provide you some guidance on what to learn after html and css.

    What is HTML CSS

    What is HTML

    What is HTML

    In short HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies(languages) for building Web pages. 
    HTML is used to build the structure of a web page.

    Click here to read more about HTML

    What is CSS

    What is CSS

    Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

    CSS is used to improve the look and feel of the web page.

    Click here to read more about CSS

    What is the difference between HTML and CSS

    From the definition it is quite simple, HTML (Hypertext Markup Language) is used to create the actual content of the page, such as written text, and CSS (Cascade Styling Sheets) is responsible for the design or style of the website, including the layout, visual effects and background color.

    Both are different languages that perform different tasks.

    How to learn HTML and CSS for free

    Here are some of the different ways on how to learn HTML and CSS:

    • Enroll for a course (online or offline)
    • Learn by reading a book
    • Find a mentor/trainer

    Here are some of websites using which you can also Learn HTML CSS for free:

    If you are wondering how to learn html and css fast, please remember there is no short cut to learn any skill. Everything takes time. You need to give it time and practice a lot

    HTML CSS tutorials

    While there are many tutorials. Here is the list of some of the best html css tutorials:

    HTML CSS Editors

    An editor is the software that is used to build your HTML pages and CSS files.

    Here is a list of some of the best free HTML CSS editors

    HTML CSS editor – Visual Studio Code

    HTML CSS Editor - Visual Studio Code

    If you’re looking for a robust editor, Microsoft Visual Studio’s free HTML editor edition of their IDE—which supports all the programming languages you’ll ever need—is a great choice. While their paid versions offer more advanced features, this free version includes all the essential tools needed for an HTML editor.

    Plus, they throw in some useful tools for mobile app development, such as code sharing between Android and iOS

    HTML CSS editor – Brackets

    HTML CSS Editor - Brackets

    Brackets is a modern, open-source editor with a few interesting features. It works with Adobe Creative Cloud Extract (Preview) to read design data such as colors, fonts, gradients, and more directly from a PSD file and convert it to CSS. It can also extract layers as images, use information from the PSD to define preprocessor variables, and easily get dimensions between objects. This is all possible without ever leaving the editor.

    Note: Adobe Creative Cloud is a paid service. Extract (its free preview) can be directly installed alongside Brackets.

    Extensions are another big plus for Brackets, which can be used to tailor the editor to the user’s needs. New extensions are released every three to four weeks. The robust support for preprocessors also merits mention.

    Sublime Text 2 – The Swiss Army Knife

    HTML CSS Editor - Sublime 2

    No other HTML editor is quite as triumphant as Sublime Text 2. It launched to immediate praise from swooning professional web developers. It is deeply customizable via extensions and JSON files. It’s tough to imagine any functionality outside of Sublime Text’s grasp.

    With the aid of Package Control, downloading and installing extensions is a breeze. Because the editor has enjoyed such widespread adoption, there’s an extensive plugin library available, even in addition to those offered on the developer’s website.

    Sublime Text 2 stands apart for its extensive documentation, both official and unofficial. Tutorials for Sublime Text 2 are everywhere and lower the learning curve.

    Sublime Text 2 is not free. It can be downloaded and evaluated for free with no limits, but if you like it, the $70 license is a very fair investment.

    HTML CSS Interview Questions

    Inorder to apply for a job you need to prepare yourself with the most common interview questions. The list of questions can be infinite. 

    Here are some of my favorite questions that I ask:

    • Different ways to include css in html file and what is the difference?
    • Difference between inline elements and block level elements?
    • What is the difference between position absolute and position fix?
    • When would you use the float property?
    • Different between class selector and id selector
    • What is specificity in css?

    You can practice more questions and answers from the links below:

    HTML CSS Jobs

    Now that you have learnt and practice HTML and CSS its time for you to find a job.

    There is always a need for a HTML CSS developer. 

    Here are some links with HTML CSS Jobs

    What to learn after HTML and CSS for free?

    Now you must be wondering what to learn after html and css?

    You should start with Javascript which is a scripting language to make your web pages interactive.

    Click here to read more about javascript

    Would you like to learn HTML CSS for free by doing?

    Subscribe to my blog in order to know more about my upcoming workshop which will teach you on “How to build your own UI Framework” without even knowing HTML CSS.

    Conclusion

    I hope this post covers the basic information that is needed to Learn HTML CSS for free.
    Please share this post if you found it helpful.
    Send me an email at “theboringdesigner” at gmail dot com if you have any feedback to make this post more helpful.