My Website Title

Creating An Html File

HTML is a markup language which browsers use to determine how a webpage should be displayed. By learning HTML, you’ll be able to write code which describes the look and feel of a website you’re trying to build.

All of this HTML code is going to be contained inside a .html file. This is any file which has a .html extension. Most text editors you’re used to using will most likely not be able to save files into the .html format. Therefore the first thing I would recommend doing is downloading an IDE that supports HTML. See the previous lesson for a full introduction on how to do this!

Once you’re set up with your IDE we can start creating our first HTML file!

Your First Webpage

When we’re working in HTML we’re creating web-pages. HTML documents are meant to be read and processed by a web browser. In order to create a website that it organized properly, we’ll want to make sure that all of the HTML files we create are inside the same folder.

Let’s begin by creating an empty folder for all of our HTML files going forward in the course. You can call it whatever you want, most people will name it the same as their website.

Now that we have an empty folder we can create our HTML file. If your IDE supports it, I would recommend adding this new folder to the IDE’s file explorer or workspace. This will make it easier to see what’s going on without having to leave the editor.

Creating index.html

Inside the new folder create a file named index.html . index.html is a special file name which indicates that this is the default webpage for this directory of our website.

Just like most people organize their files into folders and sub-folders, websites are also organized in this same way. When your website is run by the browser it will use the directory of the HTML file to determine the web page’s URL. This URL is either relative to your local file system, or to your hosted website.

Now that we have our file created, let’s add some text in it and test it out on the browser. Inside index.html type Hello World .

This is the most basic form a website can take, just some plain text written out.

Now find index.html in your file system and open it with your browser. There should be an option to do this, and usually by default .html files will open in your browser if you double click them.

Whe the page loads on the browser it should say Hello World !

Believe it or not you’ve just created your first website. It’s really basic and only has a few words on it, but it’s still a website and you’ve made your first step towards becoming a web developer.

Tags

While our current website is impressive in it’s own right, it’s not technically a properly structured HTML document. HTML documents are all required to be structured in a certain way to ensure that they will display correctly in all different versions of different browsers.

Our HTML document, with only plain text, will display fine, but if we try to do anything more complex we run the risk of some older browsers not understanding the page.

In order to make this a proper HTML document let’s format it correctly.

Copy     Hello World 

Take a look at the updated HTML document above. This is now structured correctly, and should be understandable by every browser.

Now, your first thought is most likely What are those weird things. It’s a good thought, if this is your first time seeing HTML code then you’ll be wondering what those are.

Those symbols with the < and >signs are called tags. HTML tags are used to structure and format the HTML document, and can be used to describe the layout of a website.

All of the content in our webpage is going to be contained in these tags. There are hundreds of HTML tags, although luckily most of the time you can get by with only knowing 10-15 of them. All tags have names associated to them, and depending on what you’re trying to display on the webpage you’ll use a different tag.

Container vs Non-Container Tags

There are two basic types of tags in HTML, container tags and non-container tags.

Container Tags are comprised of two tags that go together, an opening and a closing tag. In the example above we have a bunch of container tags. Take a look at the . tags and you’ll get an idea of how these work.

All tags are comprised of a <. >, with the name of the tag being printed in the middle. End tags are special because they contain a / right before the name of the tag (as you can see in ).

Container tags encapsulate other tags and plain text. Container tags are also nest-able, meaning you could have a container tag within another container tag. This nesting gives way to parent child relationships. Generally an html container tag can have a parent tag and also child tags.

Next are non-container tags (I sometimes call these single tags). These are tags which don’t have a starting and an ending component, instead they’re just a single <./>structure. These tags will have a forward slash right next to the greater-than sign on the right.

In the code above we don’t have any non-container tags (they’re more rare), but we’ll look at a bunch of them throughout the course.

Learning the Code

Now that we know some more about tags, let’s break down that html program above and see what it’s doing. We’ll start with the first line:

This is the DOCTYPE declaration. It’s actually not technically an HTML tag, rather it’s a declaration which tells the web browser what type of file this is. The browser will see this and know to treat the file as HTML document.

After the doctype declaration we can place all of our HTML:

Copy    Hello World 

This is the most basic structure we can have in HTML. All HTML documents are encapsulate by a set of tags. These act as a wrapper for the entire document.

Inside these html tags we have two distinct set’s of container tags. The tags and the tags.

The head tags are basically the settings for your HTML document. In here we can place all sorts of special tags which will help to configure and provide meta-data about the html document itself. Above we have some tags. These specify the name of the webpage, and whatever is in here will show up in the tab of the page.

Nothing that you put in the head tags will show up in the actual html document. Like I said, this section is mainly for the browser and for things like search engines to use to learn about your html file.

Below the head tags we have the body tags. It’s inside of these tags that we’ll place all of the content that is meant to appear on the web-page.

Right now all we have is our Hello World text, but eventually we’ll learn some more tags which will allow us to have more control over how this content is arranged and displayed on the page.

Making Changes

Now that you have index.html open on your browser, whenever you want to change something you can simply make the change in your text editor, then refresh the webpage on the browser.

A lot of times developers will split their screen between their text editor and the browser so they don’t have to be constantly switching between screens. As you start writing more HTML you’ll find what works for you, but in the mean time it’s worth trying!

Источник

Setting Up CSS and HTML for Your Website: A Tutorial

Building websites is the initial step of getting started with web development. One of the first things web development enthusiasts must learn is how to set up CSS and HTML for a website. By setting up the basic introductory page, a beginner can get ready with the website design basics, hone their web development skills, and learn to collaborate with developers.

This tutorial will walk you through the basics of setting up HTML and CSS files for your website. Let’s Start!

Prerequisites

Step 1- Initial Set Up

Initially, we will create a new project directory and name it a demo — project :

Next, move to the current directory using the cd command:

In the project folder, let’s add the following files that we will need to launch our basic website:

• index . html : This file will have all the HTML codes.
• styles . css : We will keep all the CSS files here for styling our website.
• images : All the necessary images must be kept in this file.

Now that we have created our project directory and added the necessary files, let’s move forward and add the HTML content in our index . html in the next step.

Step 2- Adding HTML Content in the index . html File

In the index . html file that we created in the previous step, we will add the introductory HTML codes. These basic HTML lines will serve as instructions for the browser, but will not be displayed on the webpage.

Add the following block of code in your index . html file:

Note: Make sure the index . html file is empty before you add these blocks of codes. Also, consider changing the title as highlighted in the < title >section.

Let’s understand the terms used:

• < ! DOCTYPE html >: It is a declaration informing the browser of the type of HTML used in the HTML document.
  • As multiple versions of HTML standards are available, specifying the DOCTYPE makes it easy for browsers to identify the HTML version effortlessly. For instance, in this guide, we are using the latest version of HTML5.
  • Visit the IANA Language Subtag Registry to check out the other languages available for use.

  Step 3- Styling Using CSS

  In the styles . css file, add styling as per your project needs. In this example, add the following lines of code in your styles . css file:

  We have finally created the basic HTML and CSS files we will need to launch our website. Additionally, you can add images and keep them in the images folder. Save and close the file. After that, open the index . html file in your favourite web browser, and you will see a basic page on your screen.

  Conclusion

  In this introductory tutorial, we’ve learned the basics of setting up HTML and CSS and created a rudimentary website. Now is the time to create new pages, tune them up, add content, and link everything from the navigation bar. As a next step, try adding more content to the index . html file and style it using CSS.

  Furthermore, there are other HTML and CSS tutorials that you can find on our blog:

  About Akshay Nagpal

  • Removing Spaces in Python — March 24, 2023
  • Is Kubernetes Right for Me? Choosing the Best Deployment Platform for your Business — March 10, 2023
  • Cloud Provider of tomorrow — March 6, 2023
  • SOLID: The First 5 Principles of Object-Oriented Design? — March 3, 2023
  • Setting Up CSS and HTML for Your Website: A Tutorial — October 28, 2022
  • Blog Posts
  • Business Continuity
  • Customer Success Story
  • Databases
  • IaaS
  • Networking
  • OS-level Virtualization / Containers
  • PaaS
  • Partner Success Story
  • Press Releases
  • Pressemitteilungen
  • Programming & DevOps
  • Research & Innovation Projects
  • Security & Privacy
  • Software & Tools
  • Storage
  • Tutorials
  • Usage & Billing
  • Video
  • Webinars

  

  

  Proud member of

  

  We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies. However you may visit Cookie Settings to provide a controlled consent.

  Privacy Overview

  This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.

  Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

  Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.

  Источник