Simple Web Page : Step by Step

-

Today I will tell you, how can you create a simple web page using HTML and CSS, step by step.
so let's begin..
  1. Make a folder on desktop (for easy access) naming MyFirstWeb.
  2. Open any text editor like Notepad etc.
  3. Type simple HTML structure in the text editor as:

<!DOCTYPE html>






<html>



        <head>



                    <title>



                   </title>



        </head>



   



                    <body>







    



                   </body>







</html>


  • Now save this file in the MyFirstWeb folder by naming it as : index.html
  • You can see the file Icon as of your browser.
  • Click this file to open it in the browser.
  • Edit the above code as:
<!DOCTYPE html>

<html>
             <head>
             <title>programmingHTML</title>
                 <link rel="stylesheet"  type="text/css"  href="style.css">
            </head>          
           <body>
                         <table border="50px black solid">
       
                       <!--Row for Programming Languages names --> <--! This is a comment -->
       
                                 <tr>
                                     <td>
                                               Programming Languagues
                                     </td>

                                     <td>
                                               Python
                                     </td>

                                     <td>
                                               Java
                                     </td>

                                     <td>
                                               C++
                                     </td>

                                     <td>
                                              Java Script
                                     </td>
                                 </tr>
       
                          <!--Row for Logo Images-->
       
                                <tr>
                                     <td>
                                             Logos
                                   </td>
                                   <td>
                         <img src="2000px-Python-logo-notext.svg.png" width="50%" height="20%">
                                   </td>

                                   <td>
                         <img src="58480979cef1014c0b5e4901.png" width="70%" height="20%">
                                  </td>

                                  <td>
                         <img src="cpp_logo.png" width="50%" height="20%">
                                  </td>

                                  <td>
                        <img src="download.png" >
                                  </td>
       
                                 </tr>
       
                </table> 
    
        </body>

</html>
  • You need to save logo images from the Internet in the same folder i.e. MyFirstWeb
  • Then you can write the images names in place of image.png in this:  "src = image.png". (with respect to above code).
  • The link in the head is for style sheet, for style sheet follow the steps below:
    • Open a new file in the editor, name it style.css and save it in the same folder naming: MyFirstWeb.
    • Write the following code in the style.css file and save it:



tr



{



    text-align: center;



}
    • Refresh the web page to see the results.
    • You will find the result as under.

  • You can also change the Icon of your web page by writing this tag in the <head> section as shown below:
 <link rel="shortcut icon" href="image.png">
  • Now your resultant web page would look like:

  • Congratulations! You have created your first web page, keep learning and practicing. 
  • You can visit W3 School for more help.

Comments

Post a Comment

Popular posts from this blog

Applications of Data Engineering

-
Image
In a previous blog post about data engineering, we went through several many concepts related to data engineering such as data modeling, and then we went through different types of databases, for example, relational databases and we also got a glimpse of relational as well as NoSQL databases. And in today's blog post we will be writing about data engineer applications. Which are basically the use cases of data engineering 1st let's see what data engineering applications mean; so basically when we have data and we have engineered it then there are several things that we can do with that data and these things that we can do with processed data are the use cases of the data engineering. For example: If we have filled our containers with the data then it's not of any good use if it is not clean and well-formed. If your data is well-formed and if there are no logical mistakes, missing values, and garbage then we can easily perform the use cases and applications of data enginee...
Read more

Good Pieces of Advice for Freshers

-
Image
To let you know a few useful things, I asked some experienced people, and here is what they have for you... Be open to changes. Focus on improving your soft / people skills. It will be hard sometimes but believe in yourself. You have got it. ( Rahat-Undergraduate ) Try to do good in quizzes and OHTs (One hour test or mids) cause when finals don't go well, these can help in getting good gpa which are comparatively easy then finals. ( Ayesha Munir-Undergraduate )   A few years later when you would look back at this time, GPA won't make you happy, but the memories of these 4 years will. Your career is important but so is having a good time. So work hard, party harder! ( Haris-Undergraduate ) From the start try to build your connections with seniors because they know more than you and.. are best counselors.. Focus on your quizzes and assignments because they are the building blocks of your Grade.. Your Good Image play some important part for favoritism points in exam....
Read more

Relational Data Model

-
Image
In the previous blog post, we covered Data Modeling. We have seen that data modeling is really important before jumping into predictive modeling.  In this article, we will cover the Relational Data Model (RDM). Let's start from the very basics, relational means anything which is linked with some other thing. This link is called "Relationship". In RDM or RM there are major three types of relationship cardinalities (also called Multiplicities or Cardianalities): 1. One to one 2. One to many 3. Many to many We can understand these with the help of a few simple examples;  One to one: One department has one manager. One to many: One class has many students. Many to many: Many teachers can teach many students. Okay, so we have got an abstract overview of the term " Relational ", now the next thing is " Data ", data covers everything, anything... And finally, " Model " means something in the form of a template, design, a kind of blueprint.  To store...
Read more

Banana News Network

-
Image
So, yeah a quick blog post on HTML. You need to make a news website layout, how do you do that? I made a simple web page, that I want to share with you.. The code: <!DOCTYPE html> <html> <head><title> Banana News Network </title></head> <body> <table style= "font-family: georgia;" cellspacing= "0" > <tr> <th width= "100%" colspan= "3" style= "padding-left:50px; background-color: yellow; font-size:30px" ><h1><img src= "b.png" width= "50px" > BANANA NEWS NETWORK </h1></th> <td></td> </tr> <tr> <td colspan= "3" ><span> <ul type= "none" style= "background-color:black; font-size: 30px; font-family: georgia; " > <li style= "display:inline-block" ><a href= "something.html" style=...
Read more

Question...

-
Image
There was a question related to <datalist>  regarding HTML 5. Question: Is it necessary to have <input> tag for  <datalist> usage or The search bar in the output is due to the <input> tag? Answer: Yes, the <input> tag is a must before <datalist> tag, this is because if you don't use <input> tag, then there will be no data list in the output. Reference code: (WITHOUT INPUT TAG) <!DOCTYPE html> <html><head><title></title></head> <body> <form action="" method="" > <datalist id= "list" > <option value= "a" > <option value= "b" > <option value= "c" > <option value= "d" > </datalist> </form> </body> </html> Output: Nothing in the output _ blank Do you see anything in the output ? No, right? Now let us put input tag, like this: ...
Read more

Learning : 2 Years : EXAMZ (2)

-
Image
About 2 years have been passed in the university and I have learned a lot in these two years. By "learned a lot" I don't mean only the academic learning but it also involves non-academic learning. When I was in my college, I read in my English book, that you had less number of classes to attend and less number of books to study in the university, but this is not the case, NOT AT ALL! This is true that courses are less in number but they are much in content... So coming back to the learning point, let's have a look at the list below: Always try to do your own work by yourself, never ask for help to other people a lot , people might help you in the beginning but when you ask them a lot then they will   be annoyed of you. So, do your work by yourself till the end point, and when you try your best, when you give your best, the best will come to you. No matter how much is the task difficult, if you are trying but are not succeeding in it, you will witness ...
Read more

See The Pattern : Similarity

-
Image
There are a lot of challenges and issues that demand for similarity measures among the graphs or networks, with the increase in technology the social network is also increasing day by day, therefore there is a need for more speed and more security. When we look at the mutual friends on Facebook, when we browse the internet and find all the related material to our search, or when we go to the doctor for DNA tests, the doctor provides the similarity measures among us and our family members. We wonder that how Amazon, YouTube and other related sites are giving suggestions related to our query. So there comes the concept of Similarity among different things and making clusters of those things that are very much similar.  Network Similarity is a vast field, it enables us to accomplish several mining tasks like visualization, discontinuity detection and clustering. And this require algorithms,  Designing of an algorithm to solve any problem is a big task, after the desig...
Read more

How to take notes in Freshman Year ?

-
Image
Yes, you have to take notes in the university class!  Before talking about the notetaking strategy, we will understand the importance of taking notes. Importance Of Taking Notes No doubt there are a few students who can produce good results without even taking notes in the class. But their number is least. Most of us need to make good notes in the class especially when we are in university. Notes are important because: They help us to keep track of what we have studied in the whole semester. Notes help us to prepare for the exams, in a very short time. We can refer to our notes for short quizzes in the eleventh hour. In addition to reading and listening, writing notes increases the ability to memorize the important concepts. It helps you to realize that you have done something in the class. Now that we have understood Why to take notes? Let's dig into the notetaking strategy  Notes taking Strategies One of my friends Ramlah Aamir Aziz used to take...
Read more

Calculator Using Python 3

-
Image
Today I will show you how you can make a simple calculator using python 3, I made this in my 1st semester, kindly find the code below and make sure to understand it well: import math print(" >>> CONSOLED BASED CALCULATOR >>> \n " ) print("This is a consoled Based Calculator , This allowed a user to perform the \n under lying operations:") print(" >>> Addition \n >>> Subtraction \n >>> Multiplication \n >>> Division \n >>> log \n >>> exponent ") print("this is also specially designed for the convertion of a number from degree to radian and vice versa") print("More Over the calculator also allows the user to perform 'TRIGNOMETRIC AND HYPERBOLIC FUNCTIONS' \n like : cos,sin,tan and inverse of all \n also cosh,sinh,tanh and their inverses ") print("'SO GO ON AND US...
Read more