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

Data Engineering Tools

-
Image
   Data is a new oil. To channelize this data we need proper pipelines. These pipelines are mostly called ETL or data pipelines.  There are various tools out there to work out these Extract, Transform, and Load (ETL) operations.  Some of the scripting tools are:  - Python - SQL and NoSQL Apache provides a wide range of products that can be used as Data Engineering tools.  Some of the amazing apache DE services comprised of; - Hadoop - Spark - Kafka - Cassandra - Hive In addition, some cool DE tools are: - Tableau - Talend - MapReduce These DE tools provide a way to manage the data pipelines in a more effective, efficient, and better way.  Almost every Data-Oriented company in the corporate sector is highly dependent upon these technologies. They are leveraging many of the above-mentioned mechanisms for promising Data Services and Architecture. That's it for today. Hope you have enjoyed this article. If you want to know more about data or software related concepts, let me know in th
Read more

A Survey of the Final Year University Students

-
Image
I don't know what should be the title of this blog post, but let's call it " A survey of the final year university students ". Pretty long title, huh? Okay, let me tell you about this survey... The story behind this thing: Well, one day I thought about writing a post on Facebook to ask people about their sentiments and reviews regarding the final year of university life, then another thought knocked my head to write a full blog post on this topic. Then I disseminated a google form for this purpose. The google form was saying: "Hello, final semester people! I thought to collect reviews of 2020 graduates specifically of NUST and other IT universities. I am planning to add these to my blog post. Please take a few seconds to fill this form, thank you." So that was a brief story behind this whole thing, Now let's have a look at the most awaited questions and the corresponding responses...  Question#1:  Do you feel like a better hu
Read more

E-Commerce : Platforms

-
Image
Before digging into E-commerce platforms, let's first understand what an E-commerce actually is? E-Commerce... According to the Tokenization Rule , E-commerce is the combination of "E" and "Commerce".  The word Commerce means trade or buying and selling of items, goods, services, hardwares and, softwares... etc. And " E " stands for "Electronic", electronic means something like electricity, like signals, like something in the form of electrons (at lower level).  Image Source So, the word " E-COMMERCE " means: " A type of trade, that is done using electronic devices (computer, mobile or ATM machines etc). "   And to achieve electronic commerce, what's the most important thing? think over it!  Yeah that's correct! your own Internet is the most important thing to do E-commerce.  Major areas of E-commerce are: On-line shopping or retailing On-line bidding or auction On-line soft
Read more

Data Analysis : Reading Habit Analysis

-
Image
Reading in the 21st century? Are you serious !!! Dr. Suess, an American writer once said: The more that you read, the more things you will know. But how? How to read so much! Why read? How to get motivated to read? If you are in search of these answers, then you are on the right page! In the quest to find the answer to the question: “What motivates you to read?”, I asked different people to respond to this question. Initially, I thought to write a simple article based on different responses I got. then I wondered if I could critically analyze the responses. Hm… critically analyze! but, how? Well, in this era when even kids are using Machine Learning for predicting the amount of Eidi they would get from their grandpa, why couldn’t we use Machine Learning for analyzing reading habit of different people. So, to get started with our analysis, we need some material. Things we need Dataset Machine Learning algorithms Kaggle.com And I think we will run out of
Read more

1-Machine Learning : Start...

-
Image
John went to the cafeteria 10 times at 1:00 P.M. on 10 Fridays, each time the cafeteria was closed at that particular time. John decided not to go to cafe at 1:00 P.M. on Friday because the cafe will be closed.  But wait! How did John know that the cafe will  also be closed on next Friday at 1:00 P.M.??? Yes, you are absolutely right.  "John Learned from his Experience that the Task of going to the cafeteria at 1:00 P.M. on Fridays resulted in waste of time, since the cafe was closed on each Friday, so it will Perform the same on the next Friday." In the above scenario, John learned something so we can call it " John Learning ". Similarly, if we replace John with some sort of Machine, that can learn from the Experience or from the History about how the tasks were performed in the past given certain situation. Such that the Machine will perform the same if the same task happen again in near future. Then this will be called as Machine Learning. To mak
Read more

Web Applications

-
Image
When did you open your Facebook last time? Have you connected with other people on Linked In? If not then, you might have sent an email... What am I talking about? Image Source That's right! I am talking about Web applications . Web applications are the applications that run over the web or an Internet. There are some differences between website and web applications. Difference between Websites and Web applications.. The main differences between websites and web applications are as under: Websites: Provide information as a static file. Not very much interactive. Don't allow the user to do transactions. For example: news feeds, blogs, images etc. Web applications: Provide dynamic data. Interactive rather than just informative. Allow the user to do transactions. For example: bidding sites, on-line shopping sites, mailing sites, facebook, Twitter and Wikipedia etc. How do they work? On an abstract and simple level, The client(web browser
Read more

HONET-ICT 2018 (15th International Conference)

-
Image
The wait is over.. HONET International is coming again to Pakistan, at National University of Science and Technlogy , for 15th International Conference.. HONET (High-Capacity Optical Networks and Enabling/ Emerging Technologies), is an International Conference regarding Information, Communication and Technology. This conference for 15 years aims at collecting the whole mindset of different people related to ICT, to add value in this field. Let us see the brief overview of 15th HONET-ICT Conference : Date:  From 8 Oct, 2018 to 12 Oct, 2018. Venue:  NUST H-12 Islamabad, Pakistan. Topic: Smart Cities - Improving Quality of Life Using ICT and IOT. Invited Speakers:   Prof. Dr. Mohammad Shahidehpour,  Dr. Ahmed E. Kamal,  Prof. Dr. Kamal Alameh,  Dr. Masud H Chowdhury  and  Dr. Robert Splinter. You can see the whole biographies here . Committee Members: Include the honorable Professors, you can visit them here . Organizers: NUST (Islamabad, Pakis
Read more

Web Services : AWS (Amazon Web Services)

-
Image
We have discussed the concept of cloud computing in the previous blog post.  If you want to host your website then you will buy a hosting and if you are not using cloud computing service then that web hosting service is a traditional web hosting service. But... If you are using cloud computing as you want; scalability, security, accessibility, availability and flexibility with less work done by yourself, then there comes AWS  (Amazon Web Services). AWS is the first (to my knowledge) cloud computing service provider. It is the daughter company of Amazon. Amazon.Inc was established almost 24 years ago by Mr. Jeffery Preston Bezos . And  about 12 years ago, Amazon.Inc launched a web service naming Amazon Web Services or AWS.  AWS provides a cloud server and you can do a lot of things using that cloud. Main services/products provided by AWS are:  Analytics Application Integration AR and VR (Augmented Reality and Virtual Reality) Cost Management Block Chain Business A
Read more

Frameworks vs Libraries vs Services

-
Image
Framework, libraries and services are usually overlapped. In this blog post we'll see how are these things different from one another. First let's have a look at framework .. Let's tokenize this word. Framework is composed of two terms. one is frame and second is work. Frame is anything that you can put something into . Like a photo frame, you have some sort of skeleton in which you can put your photo. but the most important thing is that your photo must be of the size of the frame. If this isn't the case then you might need to buy some other frame or you might need to cut your photo from the borders, or the bottom or the sides or from anywhere. (in order to fit it into the frame) The second word is "work" what does work mean... Well according to Physics you are only doing work if and only if some force is applied and you cover displacement in the direction of applied force. But this is not the case with this work word. Here the work is nothing
Read more

You-Tube Channel

-
Image
Welcome to Mainly The Software Engineering Blog You-tube channel. I started off this blog in 2018. Its main purpose is to provide information in an easy and in an appropriate way.  From challenges in your field to becoming the best software engineer; this blog covers each and almost everything related to engineering, technology and much more.. Now, the question is WHY ? this You tube channel?  so, the answer to this very question is that, "This is fun to read and watch a video along". If you want to LEARN in a way to become better then this Blog and Youtube channel is for You. You can like the corresponding facebook page and subscribe to this channel for more updates.... Thank you! Face-book page: https://www.facebook.com/seblog1312/
Read more