Showing posts with label Basic Short cuts. Show all posts
Showing posts with label Basic Short cuts. Show all posts

Video Tag

This is a new tag for HTML 5. This tag might not work in older browsers. We need some attributes for this tag, Source, Type, Width ,Height and Control. We need to tell the browser where is the source of the video and the type, what type of video the browser should expect. We must control attribute otherwise we can not play the video properly. The tag is

<video>
</video>

Example

<!DOCTYPE html>
<html>

<head>
       <meta charset="utf-8"  />
       <title>Video Tag</title>
</head>

<body>
           <video width="640" height="360" controls>
           <source src="gameplay.mp4" type="video/mp4">
If you can see this , you need to update your browser.
           </video>

</body>
</html>



We can use some other controls to start auto play when  browser loads and loop to play video over and over again


 <video width="640" height="360" controls autoplay loop>



Just let me know if you have any question 

MARGIN ATTRIBUTE

Like any other document we can select TOP, BOTTOM, LEFT, RIGHT Margin for HTML document

Here is an example 

<HTML>
<HEAD>
<TITLE> Example of Margin Attribute </TITLE>
</HEAD>
<Body background=bg.jpg LEFTMARGIN="100" RIGHTMARGIN="60">
<H1>This is Tanjies </H1>
<P><Strong>Services we are providing</strong></p>
<OL>
<Li>Web Development
<Li>Search Engine Optimization
<Li>Web Application
<Li>Social Media Marketing
</OL>
<P><Strong>Themes We are Using </strong></p>
<OL>
<Li>The 7
<Li>Avada
<Li>Jollyall
<Li>Udesign
</OL>
<Body>
</HTML>

The saving procedure is like before, but if u face something wrong then don't forget to write me. 



BACKGROUND ELEMENT

With this element we can change the background with image. For this we can use JPG, PNG, GIF,JPEG image. In the beginning we have said we need to keep HTML files in a folder. If you didnt do that yet, now its time to do that. To use the image as background we must need to keep those where are the HTML files. We cam make a folder name "test" and keep html files there and also save those images insider "test" folder. We can also create a folder inside test folder and name it Image and keep image files there. Lets try.

The format is <Body Background=filename.jpg>

 Here is the Example

 
<HTML>
<Head>
<Title> Example of Background Image</Title>
</Head>
<Body background=bg.jpg>
<H1>This is Tanjies </H1>
<P><Strong>Services we are providing</strong></p>
<OL>
<Li>Web Development
<Li>Search Engine Optimization
<Li>Web Application
<Li>Social Media Marketing
</OL>
<P><Strong>Themes We are Using </strong></p>
<OL>
<Li>The 7
<Li>Avada
<Li>Jollyall
<Li>Udesign
</OL>
<Body>
</HTML>

The saving procedure is like before, but if u face something wrong then don't forget to write me. 

 

BGCOLOR ELEMENT(Background Color)

We didnt add any background color yet. Now we will add background color. We have to put it as attribute under the <BODY> tag. For color we can directly add RED, GREEN, BLUE, WHITE or we can use the HEX CODE. 

Program 

<HTML>
<HEAD>
<TITLE> Example of BG COLOR ELEMENT</TITLE>
<HEAD>
<BODY BGCOLOR=RED>
<H1>TANJIES DESIGN </H1>
<LI>Web Designing</LI>
<LI>Search Engine Optimization</LI>
<LI>Web Application</LI>
</BODY>
</HTML>

Example 2

<HTML>
<HEAD>
<TITLE> Example of BG COLOR ELEMENT</TITLE>
<HEAD>
<BODY BGCOLOR=#FF0000>
<H1>TANJIES DESIGN </H1>
<LI>Web Designing</LI>
<LI>Search Engine Optimization</LI>
<LI>Web Application</LI>
</BODY>
</HTML>

For Hex code you can check our old post, HEX CODE

The saving procedure is like before, but if u face something wrong then don't forget to write me.


 

Nested Unordered List with Attribute

We have learned Unordered list. We can define the bullet by using the attribute TYPE. Generally we use SQUARE, CIRCLE, and DISK bullet.

Here is an example:
<HTML>

<HEAD>

    <TITLE> Example of Nested Ordered List with Attribute </TITLE>

</HEAD>

<BODY>

    <H1>Tanjies Web designing</H1>

<P> <STRONG> Our Features</STRONG></P>

    <UL>

        <LI>Web Desinging

        <UL TYPE = CIRCLE>

        <LI>Responsive Design

        <LI>Customized Website

        <LI>Wordpress Site</UL>
    </UL>
    <UL>

        <LI>Search Engine Optimization

        <UL TYPE = SQUARE>

        <LI>Back Linking

        <LI>Bookmarking

        <LI>Blogging</UL>

    </UL>

</BODY>
</HTML>

I hope this will help you to understand, practice it and if you found any problem let me know in comment or email me in srv2013@gmail.com. Feel free to share if it helped you. Best of Luck

All rights reserved by Tanjies Design

Complete Index HTML Tags Part 1




*** Bold tags are only available for HTML5

<! --.. --> Define Comment
<!DOCTYPE> Define the document type
<a> Define a hyperlink
<abbr> Define Abbreviation or an Acronym
<acronym> Define an Acronym(Not Supported in HTML5, use <abbr> instead)
<address> Define Contact information
<applet> Java Applet(Not Supported in HTML5, Use <Object> instead)
<area> Define an area inside image-map
<article> Define an article
<aside> Define content aside from the page content
<audio> Define sound content
<b> Define bold text
<base> Specifies the base URL/target for all relative URL in the document
<basefont> Specifies a default color,size and font for all text in a document(Not supported in Html use CSS instead)
<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it.
<bdo> Overrides the current text direction.
<big> Define big text (Noit supported in HTML5, use CSS instead)
<blockquote> Define a section that is quoted from another source
<body> Define the documents body
<br> Define a single line break.
<button> Define a clickable button.
<canvas> Use to draw graphics, on the fly, via scripting (Usually Java script)
<caption> Define a table caption.
<center> Define center text(Not supported in HTML5, use CSS instead)
<cite> Define the title of work.
<code> Defines a piece of computer code
<col> Specifies column properties for each column within a <colgroup> element
<colgroup> Specific group of one or more column in a table for formatting.
<datalist> Specifies a list of pre-defined option for input control.
<dd> Defines a descriptive/value of a term in description list.
<del> Define text that has been deleted from document.
<details> Defines additional details that the user can view or hide
<dfn> Represent the defining instance of a term.
<dialog> Define a dialog box.
<dir> Define a directory list (Not supported in HTML5. Use <ul> instead)
<div> Define a section in a document
<dl> Define a description list
<dt> Defines term/name in a description list.

List Element (Attribute with Ordered List)

In earlier post we have seen List element with out any attribute and that was the reason it took 1,2,3.. etc as default. We can set from which number the list element will start.

Format:

<OL Start="Number">.....</OL>

Now we will rewite the same code as earlier programe and use the new tag

<HTML>
<HEAD>
<Title> List Element Example</Title>
</HEAD>
<BODY>
    <H1> 3 Angle Software</H1>
    <P> <STRONG> Courses in 3 Angle Software</STRONG></P>
        <OL>
            <LI>Programming in C
            <LI>Programming in C++
            <LI>Visual Programming
            <LI>Java Programming
            <LI>Web Designing
        </OL>
       
    <P> Multimedia Courses</P>
        <OL START="6">
            <LI>Graphics Courses
            <LI>Editing Courses
            <LI>2D Animation Courses
        </OL>   
</BODY>
</HTML>
        Now we need to save this as we did earlier and then if we run it we will get a result like bellow image


 
I hope this will help you to understand, practice it and if you found any problem let me know in comment or email me in srv2013@gmail.com. Feel free to share if it helped you. Best of Luck

LIST Element

We covered few elements to make a web page. Now we will learn how to use LIST Element.

This is an example of List Element

We use this type of list in different purposes, such as Dictionary, Telephone guide, Address book, price list etc. We will learn different type of tags for Listing. There are mainly 3 types of LIST tag.

1. <OL> or listing with Number
2. <UL> of Unordered or bullet
3. <LI> this is used with  <OL> or <UL>

Except this there are Menu, Directory list, we will learn all gradually.

 Ordered List

In this list we can use 1,2,3 or A,B,C etc type of number to make list. this is why it also called as Numbered list. 

Format: <OL> ....... </OL>  and Items are divided with <LI>

Ordered List Example

 <HTML>
<HEAD>
<Title> List Element Example</Title>
</HEAD>
<BODY>
    <H1> 3 Angle Software</H1>
    <P> <STRONG> Courses in 3 Angle Software</STRONG></P>
        <OL>
            <LI>Programming in C
            <LI>Programming in C++
            <LI>Visual Programming
            <LI>Java Programming
            <LI>Web Designing
        </OL>
       
    <P> Multimedia Courses</P>
        <OL>
            <LI>Graphics Courses
            <LI>Editing Courses
            <LI>2D Animation Courses
        </OL>   
</BODY>
</HTML>



Now you have to go and save it like we did earlier, if you forgot please check here.  
 Now run it, you will get output like bellow image 
List Element Example

 As there is no attribute in the <LI> so it will take 1,2,3.. etc by default

It will continue..

I hope this will help you to understand, practice it and if you found any problem let me know in comment or email me in srv2013@gmail.com. Feel free to share if it helped you. Best of Luck

Horizontal Line Element

With this tag you can draw Horizontal line under document. Only in special occasion we need to use this one, for example after contact us details.

Format: <HR>

Code:

<HTML>
<HEAD>
<Title> Horizontal Line Element Example</Title>
</HEAD>
<BODY>
    <Address>
        3 Angle Softwares
        Scottsdale, Arizone, 85002
        Phone:1111111111
<HR>
<Address>
</BODY>
</HTML>

Save it, and then run  your program, If you dont know how to save then flow instruction here

 Result should be like this 


I hope this will help you to understand, practice it and if you found any problem let me know in comment or email me in srv2013@gmail.com. Feel free to share if it helped you. Best of Luck

Keyboard Shotcuts for Windows and Mac OS

Keyboard shortcuts are often used in modern operating System and computer Software programs.

Basic Shortcuts

Description
Windows
Mac OS
Edit Menu
Alt + E
Ctrl+F2+F
File Menu
Alt + F
Ctrl +F2 +E
View Menu
Alt + V
Ctrl+F2+V
Select All Text
Ctrl+A
Cmd+A
Copy Text
Ctrl+C
Cmd + C
Find Text
Ctrl + F
Cmd + F
Find and Replace Text
Ctrl + H
Cmd + F
New Document
Ctrl + N
Cmd + N
Open a File
Ctrl + O
Cmd + O
Print Option
Ctrl + P
Cmd + P
Save File
Ctrl + S
Cmd+ S
Paste Text
Ctrl + V
Cmd + V
Cut Text
Ctrl + X
Cmd + X
Redu Text
Ctrl + Y
Shift + Cmd + Z
Undo Text
Ctrl + Z
Cmd + Z