TechBland

Tag: web page

  • What is CSS? Cascading StyleSheet With Full Details and Examples

    What is CSS? Cascading StyleSheet With Full Details and Examples

    CSS stands for Cascading StyleSheet, and it is a language which uses with HTML. it gives style to HTML tag. we can’t design website or web pages only with HTML but besides that, we have CSS which is the most important and popular language. CSS gives style or design your page in the way you want, you can style your content or section in any way like for example we have a building a new building without style and design which is simple so now we want to give style so we use a different material that it looks beautiful, so web pages is the same we build web page with HTML and we give style with Cascading StyleSheet.

    Cascading StyleSheet is the first technology after HTML, you need to learn CSS after you learned HTML because HTML is used to define the structure of your content and CSS is used to style your content. for example, in we have some HTML tag like h1, p, font, img and many more so what we will do that we will give style to tag with help of CSS, the Cascading StyleSheet give style to your HTML tag.

    What is HTML5? With full Definition, Tags, and Example 5 Best HTML Editor in 2019

    How many usage CSS have?

    In Cascading StyleSheet we have 3 usages like.

    1. Inline CSS
    2. Internal CSS
    3. External CSS

    1. Inline StyleSheet:

    An inline style may be used to apply a unique style for a single element. for example.

    <h1 style=”color:green”>Hello Viewer</h1>

    look to the bold text it is an inline style we have an h1 tag and now let’s give a green color to the tag first write style then give the equal = sign and start double colon or single colon and then give property name then semicolon and then give property value and close double colon or single colon. this is the way to use inline style and give style to your content.

    inline css

    2. Internal StyleSheet:

    An internal style sheet may be used if one single page has a unique style.

    Internal styles are defined within the <style> element, inside the <head> section of an HTML page:

    for example:

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title>CSS Internal Usage</title>
    <style>
    h1{
    color: green;
    font-size: 50px;
    }
    p{
    color: blue;
    }
    h2{
    color: red;
    }
    </style>
    </head>
    <body>
    <h1>Hello dear</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, ex.</p>
    <h2>Cascading StyleSheet topic</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </body>
    </html>
    so here is the output
    internal css
    as we used Internal StyleSheet in HTML file. you should code your CSS in the <head> section because we can’t do it anywhere else.

    3. External StyleSheet:

    with an external stylesheet, you can change your entire website design. with only including one file in your project, every project has one CSS file that every coding of CSS is code in that file. you can simply give style to your content by using Cascading StyleSheet. you have to give <link> to your CSS file inside <head> tag like.

    <head>
    <link rel=”stylesheet” type=”text/css” href=”style.css”>
    </head>

    an external StyleSheet can be written in any editor . but it won’t contain html extension, the StyleSheet must be saved a .css extension.

    here are some coding of the style.css file

    body{
    background-color: green;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    }
    h1{
    color: #fff;
    font-size: 50px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    }
    p{
    font-size: 16px;
    color: #ccc;
    text-align: center
    }
    Note: Do not add a space between the property value and the unit (such as margin-left: 20 px;). The correct way is: margin-left: 20px;

    StyleSheet Property and Value:

    here are some stylesheet property name and property value that given as an example. each property has there own value it is not interchangeable.

    background-color it will give a background color to the content
    color it will give color to the content
    font-size it will increase and decrease the text size
    margin it will give a position to the content
    padding it will give space to the content from its parent
    font-family it will give font style to the content
    width it will give width to the content
    height it will give height to the content
    border it will give a border to the content
    top, left, right, bottom these are used to set a position of the content

     

  • What is HTML5? With full Definition, Tags and Example

    What is HTML5? With full Definition, Tags and Example

    What is HTML5? With full Definition, Tags, and Example. In 1990 Tim Berners-Lee develops HTML which stands for (Hypertext Markup Language). it is used to create web pages and to develop websites, whatever you see in world wide web (www) that all are created in HTML.  the internet browser will get easily HTML code and display it for you in the browser. the only way we have to create a web page is only HTML, insides HTML we have many tags that each of tag are for a specific task. like we have a header, footer, nav, img, form, table, h1 to h6, p, a, video, audio,  center, section, aside and many more. with these tags, we can easily manage our page and give style to them.

    so before going to example and details, just know that HTML5 is the new version of HTML. and this new version of HTML has many new tags although the coding is the same only it updates the tags and brings new tag, which is here <article>, <aside>, <canvas>, <footer>, <figcaption>, <figure>, <meter>, <progress>, <mark>, <keygen> and many more. these tags are so useful and simple.

    What is CSS? Cascading StyleSheet With Full Details and Examples 5 Best HTML Editor in 2019

    What does an HTML5 tag look like?

    html5 tag

    In HTML at first, we have HTML tag then after tag we have an attribute name like in here I code link tag a and with tag, we have attribute name that we use href then after that write attribute value then close the tag.

    I hope you get what I mean, in opening tag we use attribute name and attribute value after opening tag we write out text or the link name then at the last close tag, don’t forget to close tag each tag have opening and closing if you don’t close the tag so it will be applied to all of your text that you write after opening tag.

    <a></a>

     HTML tag open with less than < then tag name and greater than > after that write your text or give your task and close the tag. HTML tag close with less than <, forward slash /, tag name and greater than >.

    How does HTML5 look like?

    html5 code

    This picture describes that how HTML look like or how it started.

    1. <!DOCTYPE html>, it shows the version of HTML that which HTML version it is.
    2. <html> we have HTML tag open. the browser will know that this text is written in HTML. and the language is English.
    3. <head> the third line we have a head. inside a head, we provide all our information like meta description, CSS link, and other details.
    4. <body> at the last we have body tag open. in the body tag, we provide our text, image, and lots of things. in the browser that you see the content so it is written in the body tag.

    What is Bootstrap? Learn From Basic with Examples What is PHP Language? and How to start with basic code of PHP?

    How to create an HTML5 file in PC?

    every language have its own extension like we have many extension js, css, php so HTML is the same while if you want to create an HTML file in your project folder so write file name and put .html this extension tells the browser that the file or content is written in HTML.

    html5 extension

    What HTML5 tags are?

    here are all HTML tag with name and description. here are some of them I explain.

    h1, h2, h3, h4, h5, h6 these six tags are used for Heading.
    p this is used for Paragraph.
    image this is used for the image, to put an image on your page.
    video this is used for video, to put a video on your page.
    audio this is used for audio, to put sounds on your page.
    header this is used for the head of the page.
    footer this is used for the footer of the page.
    form with this tag, we create a form for our page.
    input input is used for email, password, text etc.
    button this is used to create a button.
    a this is used to create a link on our text.
    center this is used to center your content or text.
    table this is used to create a table on your page.

     

    First HTML5 project

    now let’s do practice, in this section I will show you practically that how to do HTML coding or how to use HTML tag.

    so at the first create a folder on your PC and create a file with any name and give HTML extension to the file like I will create a file with the name of index.html.

    the second step opens the folder in any HTML editor. if you don’t know about HTML editor so go here 5 best HTML Editor 

    now let’s start our coding

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <metacharset=”UTF-8″>
    <metaname=”viewport”content=”width=device-width, initial-scale=1.0″>
    <metahttp-equiv=”X-UA-Compatible”content=”ie=edge”>
    <title>First Project</title>
    </head>
    <body>
    <h1>Hello Viewer</h1>
    <p>Wellcome to techbland.com</p>
    </body>
    </html>

    html5 code

    in here we used only 2 tags that the first one is h1 (heading 1) as we give heading to our page and the second one is p (Paragraph) that we write some text.

    don’t forget to close the tag while you open the tag and after completing your text or content so close the tag.

    Second HTML5 project

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <metacharset=”UTF-8″>
    <metaname=”viewport”content=”width=device-width, initial-scale=1.0″>
    <metahttp-equiv=”X-UA-Compatible”content=”ie=edge”>
    <title>Second Project</title>
    </head>
    <body>
    <h1>Welcome to second project</h1>
    <p>in second project we will do some text with image</p>
    <imgsrc=”images.jpg”alt=”html-img”>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit quasi perferendis expedita ad nulla nobis reprehenderit</p>
    </body>
    </html>
     
    here is the output in the browser
    html5 example
    in the second example, we have heading with h1 tag and 2 paragraphs with p  tag but between p tag we have img tag that it display image in our page, you can see in the browser.
    I hope you get what I am saying. in HTML we can do or we can display anything in anywhere of the page it depends on you that how you design your page and how you give style to your tag with the help of CSS.
    HTML is the first step to learn how to design a website and how to create a website page. you have to learn it deeply.