“Friends today we are going to learn about the basics of html and css do don t worry if you are completely new to the web development as in this we are going to start from the basics of creating an html and css file. I will start this tutorial hoping that you are a new or very much a beginner to web development. Let me tell you with html and css you can create a web page a static website and email er or maybe a landing page. So let s get started now okay so.
Etc. Html stands for hypertext markup language. Basically. It s a markup language for the browsers and html files includes all the content of a web page such as text and images.
Etc. Now let s talk about the css css stands for cascading style sheet. It is basically a style sheet. Which holds the styling part of your web page any styles like bold.
But there are some advanced text editors meant for web development. Only here my personal preferences are notepad plus plus and dream. Viewer. Notepad plus.
Plus is completely free to download. And use whereas. Dream viewer is a paid software by adobe you may try the free trial version of the dream viewer and buy it if you like both the software s are good and the direct download link of both the softwares are given in the video description below our second requirement is a web browser you can use any web browser that s fine my personal preference here is google chrome and mozilla firefox so before we get into the actual tutorial download. And install the html editor to your computer or laptop.
And just for info. I will be using dream viewer as an html editor in this tutorial. So i hope you have downloaded and installed the html editor to your computer or laptop as of now. Okay.
Let s now get into the development part first we need to create a folder and name it as webpage you can name it anything now open this folder as i told you an html is basically a text file so let s create a text file here name it as index and you need to change the extension of the file as html you okay great now we have created our html page. Let s do the same thing to create a css file create a text file again and name it as style and here you need to change the extension as css you so we have created our css file as well let s open our html page in the browser. You here you can see our html page. Which is completely blank now as it does not have any data.
Okay let s open the html file in the html editor. You you here we have opened the file in both html editor and the web browsers side by side so once we make any changes to html file. We can check the changes in the browser. Okay so before we start let me tell you that html is created using tags a tag is a text keyword written in between less than and greater than bracket that define how the browser must format and display the content you most tags must have two parts an opening and a closing part for example here.
We write the opening tag and closing tag for html closing tag is prefixed by a slash. This is opening tag and this is closing tag html elements with content are called empty elements empty. Elements. Do not have an end tag.
Such as the br tag. It indicates a line break. There are hundreds of tags used in the html. And these tags are easy to remember.
Most of these tags are named according to the job. They do for example p tag for paragraph and b tag for bold a link to the list of tags are given in the video description below spend some time with them to understand. Which tag is used for which purpose..
Okay. So let s now start the coding first delete all these and start with the first line of code. First tag should be doctype doctype tells the browser that it s an html file for html5. We just need to mention html here for earlier versions.
We use to give reference to a dtd. But for html5. It s sufficient ok. So.
Now. The second line of code is for html tag. Open. Html tag.
You you and here is the closing tag for html. Now. All other tags will come in between the html tags. You now let s put more tags in between these html tags the two important tag here is head tag and body tag let s create it you so everything thing.
That describes your webpage will come in side the head tag for example title tag meta description tag etc and all the content of your web page will come inside the body tag. Let s create other tags create the title tag inside. The head tag. Give title to your webpage and close the tag.
Now let us link our css file that we have already created for this we will use link tag. You we will put the link in between href tag. And specify the file type here you now we have linked the css file to our html. Okay.
Let s open the css file with the html editor. You here i have opened the css file. Now we have both the files in the editor here okay. So before we get into the style.
Let me tell you that in css. We will be using id and classes id. And classes attribute assigns a name to your element. The difference between id and class is that the id has to be unique at one page.
But the class can be used multiple times id is prefixed by a hash and classes are prefixed by a dot. Let s create an id you this is an id and let s create a class here. It is you styling of an id or classes will be written in between these curly brackets. You you there are some elements that are unique does not require any id or classes such as body tag.
Now let s play with some content and styling. Let s go back to our html and put some content in the body tag let s write hello world now let s save. The changes. Okay now let s do some styling go to our css file again and put some styling here you save the changes in the stylesheet as well you now refresh your browser.
Wow great we have created our first web page here you can see the title and here is the content in the browser body okay so let s play around this and add some more styling you and refresh the browser again oh we need to save our changes first okay refresh again here is the changes. Wow okay so now let s end this tutorial. Here. In this tutorial.
We learned about how to create an html and css file. What are tags and how to link css to an html file. We also learned about the id and classes so till the time we come up with our next tutorial keep practicing what you have learned the more you practice the more you will learn also check out the video description below for all the resources. We discussed in this tutorial and in the second part of this tutorial.
We will be designing and creating an actual webpage meanwhile. If you have not subscribed our channel. Yet do subscribe below also if you have liked this tutorial. Please do click on the thumbs up below and share it with your friends.
If you have any query do comment us below in the comment section. ” ..
Thank you for watching all the articles on the topic HTML 5 & CSS 3 Tutorial For Beginners – Part 1 Of 2 . All shares of newyorkcityvoices.org are very good. We hope you are satisfied with the article. For any questions, please leave a comment below. Hopefully you guys support our website even more.
“This is an HTML 5 and CSS 3 tutorial for beginners. This tutorial starts with the basics of HTML and CSS, and it is good for anyone who is new into web development or just trying to learn the web designing and development.nnPart 1: First part of the tutorial here covers everything from the scratch to create your first web page in depth. It includes HTML creation, HTML Tags, Linking CSS to your HTML, CSS Styling, ID and classes etc.nnPart 2: In the second part, we will design u0026 create an actual web page using the skills we have got from the first part of the tutorial.nnWith the help of this “HTML 5 u0026 CSS 3 Tutorial For Beginners” you can learn and create your first web page, a static website, an HTML Mailer or may be a Landing Page. nnVisit our website: https://www.digitaladquest.comnn———————————————————————————————————–nLINK TO DOWNLOAD HTML EDITORn1. Notepad ++ : https://notepad-plus-plus.org/n2. Dreamweaver : http://www.adobe.com/in/products/dreamweaver.htmln———————————————————————————————————–n———————————————————————————————————–nHTML Tags Learning Resources: http://www.w3schools.com/tags/n———————————————————————————————————–“,
HTML 5 & CSS 3 Tutorial For Beginners, HTML Tutorial, CSS Tutorial, Creating Website, Creating Web Page, Link CSS to HTML, Advanced HTML & CSS Tutorial