Posts

Showing posts with the label htmlcoding

HTML CODE PART 6

Image
 HOW TO MAKE AN IMAGE AS LINK IN HTML LINKS links are the structures which connects us to the web of internet  links are like vines which are called blood carrying vessels in our body links also act as the same  links connect us to the different parts of the internet and world wide web  uncountable links are generated everyday its so much in large quantity that we cannot keep the track of how many links are generated every day. IMAGES  An image is a visual representation of something. In information technology, the term has several usages IMAGE AS LINK In some websites we can see that there are many images which acts as a link when we click on that image then that image redirects us to another page and it acts as an external link In many online shopping websites we can see images when we click on them then it takes us to the respective of their pages and gives us information this redirecting of different pages using image is called as image as link. EXAMPLE CODE...

HTML CODE PART 4

Image
HOW TO MAKE ORDERED & UNORDERED LIST IN HTML What is a list? A record of short pieces of information, such as people's names, usually written or printed with a single thing on each line and often ordered in a way that makes a particular thing easy to find. There are two types of lists.... Ordered list  Unordered list Ordered list   ordered list is a list consisting of numbers, alphabets , roman numbers and many more ... these are very systematic and looks good to see it also helps to keep the records of the list..   Unordered list  unordered list is a list consisting of bullets, shapes , squares , rectangle and many more these and very much similar as ordered lists...  EXAMPLE CODE <html> <title> web page</title> <head><center><h1>excercise 12</h1></center></head> <body> a]excercise  <ul type="dot"><h3> <li>computer science</li> <li>civil engineering</li> ...

HTML CODE PART 2

Image
USING DIFFERENT TYPES OF FONT STYLES IN HTML   BOLD A set of type characters that are darker and heavier than normal. A bold font implies that each character was originally designed with a heavier appearance rather than created on the fly from a normal character. ITALICS It may be difficult to imagine, but before the use of computers, nearly every document or publication was handwritten or hand set using letterpress (movable type), followed by mechanical typesetting and phototypesetting. In the 21st century, it's easy to italicize individual words and phrases when keyboarding documents. An italic font is a cursive, slanted typeface. A font is a specific size, style, and weight of a typeface used in printing and writing. When we keyboard text, we typically use a roman font, where the text is upright. By comparison, an italic font is slightly slanted to the right, as shown here Organizations, like the American Psychological Association (APA) and the Modern Language Association (MLA) ...

HTML CODE PART 1

Image
ALIGNING THE WORDS. In this example we are going to see the different types of alignments and we will learn how to use them..... WHY ALIGNMENT IS USEFUL IN WEB DESIGN? Alignment is one of those things that comes hand-in-hand when working with grid systems. The subject of alignment isn’t simply a matter of choosing whether or not you want to align text or images to the left or right of a design (though those decisions obviously still matter), instead, we employ alignment to improve our designs. Proper alignment in your designs will make them visually more appealing and will also make it easier for users to scan over a page, sub-consciously also offering a calmer reading experience. All of the elements in your design will have to be aligned in some way, whether this is just plain text on your page, images mixed within the text (or even header or hero images), videos, buttons and call-to-actions, links (within the text or in modules such as a navigation section) or any other elements you ...

ADDING A LINK IN HTML PAGE

Image
In html a link can be added using href tag  using href tag we can give the link to an external page and we can redirect from one page to another page . here is the code of the html page which redirects to another page code <html> <head><h3><center>excercise7</center></h3></head> <title>hyperlink</title> <body> <p align="cenetr"> <a href="excercise 5.html"><h1><center>click here for more images</center></h1></a href> </p> </body> </html> output after clicking on link

INFORMATION ABOUT INTERNAL AND EXTERNAL LINK IN HTML

Image
  LINKS LINK: links are the structures which connects us to the web of internet  links are like vines which are called blood carrying vessels in our body links also act as the same  links connect us to the different parts of the internet and world wide web  uncountable links are generated everyday its so much in large quantity that we cannot keep the track of how many links are generated every day. In html there are two types of links  1) internal links. 2) external links. Internal links  An  internal link  is a type of  hyperlink  on a web page to another page or resource, such as an image or document, on the same website or domain.  External links An external link is a link which helps us to reach to another website of the another domain and we can switch form one website to another. Href tag The href attribute specifies the URL of the page the link goes to. Tip:   You can use href="#top" or href="#" to link to the top of the...

CODE FOR THE FOLLOWING LOGIN PAGE

Image
CODE <html> <style> .h1{     color: white;   } .h1{        font-size: 50px;      } .h2{         color: white;         font-size:40px;       } .h3{         color:white;         font-size:30px;       }  #box-1 {     background: linear-gradient(100deg, #CCFFFF, #FFCCCC);     width: 20%;     height: 45%;     filter:blur(-1px);   } .hi{             color: blue; } .h6{        color: blue;        font-size: 15px; } } </style> <body style = "background: url(https://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg); background-size: 100% 100%;"> <div> <h1 class="h1"> <b><center>WELCOME TO OUR XYZ WEBSITE</center></b></h1>...

CREATING A LOGIN PAGE IN HTML

Image
LOGIN PAGE login page is the page where we enter our information to a particular page or an application login page consists of  name of the website  content box text enter box password entry box  radio buttons  check boxes submit button  and the link to the main or sub page these are the factors considers when we create any login page  you can find how to create all the above factors in the earlier posts  THIS IS THE EXAMPLE OF A LOGIN PAGE  MADE BY ME IF YOU ALL WANT THE CODE OF THIS PAGE PLEASE COMMENT ME IN THIS POST

CREATING A SUBMIT BUTTON

Image
CREATING A SUBMIT BUTTON Submit button is used to submit the information relating to the specific page or to the specified form  this is the main button of the information page . 1) Every Form should have one -- eventually you will need to send the data from the form. 2) The  type  attribute  ``SUBMIT''  is used to indicate a submit button. 3) The simplest input button is produced by: <input type = "submit"> This creates the following button: 4) You can change the name of the button with the  VALUE  attribute. For Example Several buttons may be included in a form and by including a  name  attribute the CGI script can check this with the  value   to see which button was pressed. More on this in CGI script sections later. For Example: <form> <input type="submit" name = "left" value = "left"> <input type="submit" name = "right" value = "right"> <input type="submit" name = ...

ADDING A CHECKBOX IN HTML

Image
ADDING CHECKBOX IN HTML. checkbox A  checkbox  ( check box ,  tick box ,  tick box ) is a  GUI widget  that permits the  user  to make a binary choice, i.e. a choice between one of two possible mutually exclusive options. For example, the user may have to answer 'yes' (checked) or 'no' (not checked) on a simple yes/no question. Check boxes are shown as ☐ when unchecked, or ☑ or ☒ (depending on the GUI) when checked. A caption describing the meaning of the checkbox is normally shown adjacent to the checkbox. Inverting the state of a checkbox is done by clicking the mouse on the box, or the caption, or by using a  keyboard shortcut , such as the  space bar . HOW TO CREATE CHECKBOX IN HTML checkbox is very simple to create it is as simple as radio button and text box so first we have to use label tag and specify its name. then use the input tag and specify type as checkbox  and close the input tag. EXAMPLE  OUTPUT

ADDING A RADIO BUTTON IN HTML

Image
ADDING A RADIO BUTTON IN HTML Radio buttons are the simple buttons which help us to choose the options between to..... A  radio button  or  option button  is a  graphical control element  that allows the user to choose only one of a predefined  set  of mutually exclusive options. The singular property of a radio button makes it distinct from a  checkbox , which allows more than one (or no) item to be selected and for the unselected state to be restored. Radio buttons are arranged in groups of two or more and displayed on screen as, for example, a list of circular holes that can contain white space (for unselected) or a dot (for selected). Each radio button is normally accompanied by a label describing the choice that the radio button represents. The choices are  mutually exclusive ; when the user selects a radio button, any previously selected radio button in the same group becomes deselected (making it so only one can be selected). Sele...

ADDING A PASSWORD TEXT BOX

Image
ADDING A PASSWORD TEXT BOX Adding a password text box is as similar as adding a simple text box only we have to change few words in input tag so the syntax of input tag is <input type="password" placeholder="password" size="50"> EXAMPLE CODE OUTPUT

ADDING A TEXT BOX IN HTML..

Image
ADDING TEXT BOX  We can add multiple text box in a html page and we can enter and store the required text  adding a text box is very simple and its very simple to implement. THERE ARE FEW TERMINOLOGY AND SYNTAX REQUIRED TO BE FOLLOWED LABEL TAG we have to add label for the text box. In label we have to specify for.  after for we have to write the label. and the close the label tag. INPUT TAG  first open the tag and use input  specify the type  use the placeholder and place the holder specify the size of the box and text EXAMPLE                                              CODE  OUTPUT

ADDING TABLE IN HTML

Image
TABLE IN HTML. We can create a Table in html and can list many items in a systematic way which looks good and neat whenever some one visits your page. there are few important tags in creation of a table. let us analyse them <table border="1"> through this tag we can set the border thickness,style and all... <tr> this specifies table row. </tr> closing table row. <th> table head it specifies the top heading of an item list. </th> closes the table head. lets see an example CODE OUTPUT

USING DIFFERENT STYLES IN HTML.

Image
STYLES html provides us many ways to improve and glorify the structure, look and design of the page  some of such features are as follows   BOLD. UNDERLINE. ITALICS. STRIKE THROUGH. SUBSCRIPT. SUPERSCRIPT. SYMBOLS. AND MANY MORE....... LETS START WITH BOLD. 1.  W ith the help of bold we can make the letters more visible and clear to see and also we can                 highlight the specific letters , words and sentences. 2.  It is very simple to use this feature, just there is only one tag to use. 3.  So use <b> bold tag in an area where you want to apply this effect and then close the bold tag        </b>. its that simple. Lest see an example and understand this............ CODE OUTPUT As you can see the highlighted part has bold effect. NOW LETS CHECK UNDERLINE. 1, Now underline. underline is as similar as bold. 2. underline is used when we have to highlight and make it more visi...

INTRODUCTION TO HTML.

Image
INTRODUCTION TO HTML HTML is a type of language that structures content; in other words, it labels different elements such as images and text in order to tell your browser how to display the content and in what order. Every HTML element has  HTML tags , and a tag (<h1> or </h1>) is surrounded by angled brackets like < and >. Tags define elements and tell the browser how to display them (for example, they can tell the browser whether an element is an image or a paragraph of text). Most HTML elements have an  opening tag  and a  closing tag  that show where the element begins and ends. The closing tag is just the opening tag with a forward slash (/) before the element name. We can generalize the format of an HTML element Here, content is something we add. It can be anything, like “Hello world” in our h1 example; ‘element name’, however, has to be one of the predefined tags like h1, h3, p or strong.  

ADDING AN IMAGE TO A HTML PAGE.

Image
ADD AN IMAGE TO HTML In html we can add as many as images we want it is pretty simple to add image to a html page there are few easy important steps that we must follow syntax of adding an image  At first we must know about image tag , image tag is the tag through which we can insert an image image tag consists of few parameters those are img src, width, height and etc. img src=  means "image source" the source from where an image has to be loaded . width = it specifies the width of an image.  height = as its name it specifies the height of an image. EXAMPLES          CODE OUTPUT There is one important note image should be saved in the folder where all the html text files are stored and as much as we can use the images there is no any kind of restrictions.

Adding ordered and unordered list to HTML.

Image
ADDING ORDERED AND UNORDERED LIST. In html we can add and list the items in very well mannered order  there are two types of lists , those are  1) ordered list . 2) unordered list. : ORDERED LIST ordered list is the collection of many items in a systematic manner and neatly represented in the given order by the user ordered list is very easy to execute and to implement it............................ <ol> this is the syntax of ordered list  # first we must open the tag <ol> # In the tag we can specify the type of listings like numbers,alphabets,roman numbers and many more etc. ie <ol type="1"> this tag specifies the list type is numerical. # next after the ordered list tag we have to specify the list items  ie <li> item name </ li>. # at the end we can end/close  the ordered list tag . ie </ol> EXAMPLE:                                ...

STRUCTURE OF HTML.

Image
Html is a tag based language . html consists of many tags some of the tags are as follows <html> the main html tag </html> closing the tag. <title> adds the title to your page </title> . <head> head of the page </head> . <body> in this tag we have to write the body of the web page and at last close the body tag </body>. There are 6 heading tags in html which are very much important to glorify the texting style of the web page .. those are .. <h1> and closing of <h1> . <h2> and closing of <h2> . <h3> and closing of <h3> . <h4> and closing of <h4> . <h5> and closing of <h5> . <h6 > and closing of < h6> .                         EXAMPLE CODE                         OUTPUT. If we have to add any paragraph to the existing html code we can use parag...