Getting Started With Web Developement With HTML5, CSS3 & JS





ABOUT AUTHOR:

Hello Everyone! 

 Welcome to the HTML5 + CSS3 + JS Series of Website Development on The Coding Cloud. My Name is Yogesh Bansal and I am Pursuing B.Tech in Computer Science Engineering at Baba Farid College of Engineering and Technology. I have 6 months Experience Working with HTML5 + CSS3 and I have Worked on Several Projects. The Main Motive behind Starting this Series is to help You All Learn HTML5+CSS3 + JS and Improve My Skills as I Will also have to Discover More for You People to Learn, as they say Learning by Teaching. This Series will be a Project based Learning because even I get bored of Only Theory as Hands on Practice Matters the Most. So, I Will be Your Instructor throughout the Series and If You have any Query, Suggestion, Feedback or You Feel any Scope of Improvement, You can Comment below and I Would Love to hear from You All.
LETS START WITH THE BASICS OF HTML

 What is  HTML?

 * HTML Stands For Hyper Text Markup Language
*  It describes the structure of the Webpage
*  It is used to describe how the content should be displayed on the Webpage 
*  HTML uses Markup Language to mark the contents on the page
*  It helps to link all the resources on the server
SETTING UP THE ENVIRONMENT FOR HTML:-

 To write HTML pages you want some editor , follow steps to install recommended editor:

 STEP1:- Go to  http://brackets.io/

 STEP2:- Download the Brackets Software and Install it on your System

 STEP3:- Go to Brackets and Make new file and save it as .html extesnion on your system

 STEP4:- Write your code , Save it  and Go to that file location and open it with your browser

Why we use HTML5 instead of HTML Nowadays?
  • The new HTML headings like <header>, <footer>, <nav>, <section>, <aside>, etc
           allow screen readers to easily access content.
  • We can truly Accessable our video and audio with new HTML5 tags like <audio>, <video>.


  • HTML5 allows you to write clear and descriptive code, semantic code that allows you to easily separate meaning from style and content


  •  HTML5 is easy to implement and it works with CSS3
  •     The DOCTYPE declaration for HTML5 is very simple:
  • <! DOCTYPE html> : it simplifies that the document is in HTML5
 
  • * Some elements are removed in HTML5, like isindex, noframes, acronym, applet, basefont, dir, font, frame, frameset, big, center, strike.
What are Tags in HTML ?

 HTML tags are the element name surrounded by angle brackets.
Most tags must be open and closed as well in order to function.

 For Example:- <h1>SOME TEXT</h1>
                          
The first tag is called Start Tag and  second tag is called End Tag
What are Elements in HTML?

 An Element is the opening tag, the closing tag and anything in between
<TAG>SOME TEXT</TAG>

 EMPTY ELEMENTS :- <TAG></TAG> In this there are no data between the tags
HTML DOCUMENTS :-
* All HTML Documents start with a document type declaration <!DOCTYPE html> - This    means that document is in HTML5.

* The HTML document itself begin with <html> and ends with </html>

* The visible part of the HTML is written inside the <body> and </body>

*  Meta tags are written in <head> and </head> that are not visible on webpage

Example of simple HTML page:-
  <!DOCTYPE html>
  <html>
  <head>
  <title>Page Title</title>
  </head>
  <body>

   <h1>First heading</h1>
  <p>Paragraph</p>

   </body>
  </html >
This is simple html page which consists of Tags ,Elements and Attributes 

  <!DOCTYPE html>  :- This tells that the document is in HTML5
<TAG> Some text </TAG> :- These are tags
<h1> SOME TEXT </h1> :- This is  heading tag

 For example, if you wish to change a specific text style to italic, you can use <i>type your text here</i>.
 Your browser will render the content via these tags, then display it on the screen.
And you can use <strong>Hello</strong> this tag to bold the text.


THANKS FOR LEARNING WITH US AND IN NEXT POST WE WILL LEARN ABOUT :- 
*  HTML HEADINGS
*  PARAGRAPHS
*  LINKS
*  IMAGES
*  LISTS
*  AND MANY MORE
 STAY TUNED WITH US AND IF ANY QUERY RELATED TO POST PLEASE  COMMENT BELOW  

  I AM HAPPY TO HEAR FROM YOU..


Comments

Post a Comment

Popular posts from this blog

Redhat Ansible Expert Session Self Reflection

What is Ansible? Ansible  is a radically simple IT automation engine that automates cloud provisioning, configuration management, application deployment, intra-service orchestration, and many other IT needs. Its very much popular and has around quarter million downloads per month. Ansible can be used for cloud provisioning, configuration management, application deployment, intra-service orchestration, and many other IT needs. Now I ll be telling you about the recent workshop that i attended details of which are given below :- Workshop : Industry Use Case on Automation Using Ansible - Demo ( Practical Implementation ) , 28th December 2020  Experts : Sreejith Anujan ( Principal Instructor , RedHat )   Arun Eapen ( Director - APAC, Service Delivery, GLS, RedHat, Asia Pacific )   🚀   Organized by :  LinuxWorld Outcomes:- * Learnt about Ansible Tower * Got to know about templates * How python environments canbe used to do things, for which there are no modules available * How to create cus
Read more

Setting up a Virtual Development Environment for Django3

Image
Goal: A Professional Quality Development Environment If you already have Django 3.x installed in your system, then you can skip this post but if it's not, then don't worry we will get everything up and running in the next few minutes. To install django, you need to have Python 3.x running in your System. To install python in your system, you can check official website of python To confirm whether you have python installed in your system or not, just type python in your shell and you should see the shell of python3.8.x Creating an isolated Python environment After you have Python3.x running in your system, We will now create a virtual environment which won't have anything installed except the python and we will use this to work on our django projects. Using virtual environments helps us to separate different package versions for different projects. Also if you are in multi user OS, then you won't need any permissions to install anything and work on your project.
Read more

Lets Start With The Basics Of HTML

Image
HELLO EVERYONE , As you know everyone its Yogesh Bansal here, So recently we have done about the introduction to HTML. Today we start with the basics of HTML. Like:-Headings, Paragraphs, Links, Images, Lists, and many more. If there is any doubt or problem please comment it down I will be happy to hear from you. What are the attributes of HTML? Attributes are the modifiers of the HTML element. It modifies elements like font-size, font-color, etc. It always declared in the start Tag For ex:- <TAG style = "color:blue">Some Text</TAG>  # "style" is attribute here There are many types of attributes like href attribute, src attribute, alt attribute, target attribute, etc. What are HTML headings? HTML headings are the titles or subtitles that you want to show on the webpage. There are 6 Heading Tags from <h1> to <h6> <h1> shows the most important heading and <h6> show the leas
Read more