Front End Development (Day 1 of 2)

HTML

 Hypertext Markup Language

Not a Programming Language
Used to build structure of website

CSS

 Cascading Style Sheet Language

Not a programming language
Used to style website

JavaScript

 Programming language, add interactivity.

Objective :

Basic idea about how websites are built
Understand common html tags
Understand common html attributes
Understand HTML DOM Hierachy
Build simple structure with common html elemnts
Add simple styling with common css
Understand how CSS target elements to add styles
Extreme basic javascript
Understand how javascript identify elements to add interactivity

Let’s create our first HTML file

Create a new folder on your Desktop called: HTML_Class
Drag and drop into Sublime Text
Create a new file inside of the HTML_Class folder
1. File > New File
Give it a name myFirstPage.html
File -> Save as > Select Desktop > Select HTML_Class folder and save
Navigate to the folder on your desktop and open it with Google Chrome
- you can double click to open and it will open on default browser you have)
Now it's time to edit the html file in sublime
1. Html use this syntax to represent elements on the web
```
 <tagName> content </tagName>
```
1. in your empty html file , type html and hit tab key on your keyborad and it will generate below skeleton for you
```
  <!DOCTYPE html>
  <html>
  <head>
       <meta charset="utf-8">
       <title></title>
  </head>
  <body>

  </body>
  </html>
```
Type Cool Website in between title tag in line 5
```
  <title>Cool Website</title>
```
Save it and open again in chrome(refresh) to observe the page title in browser tab has changed to Cool Website
Now inside body tag line number 8 enter below heading
```
<h1>this is my first h1 tag</h1>
```
Save the file and refresh chrome to see the change .
and continue to add more

Working with HTML in IntelliJ

IntelliJ has strong support for creating and editing html file and support all emment shortcuts to easily generate html elements.

You can create a new HTML file literally in any existing project you have and directly see your result inside IntelliJ Preview or browser

If you want to import the folder you created earlier simply do below

From top menu File->Open->Select Desktop-> Select HTML_Class folder
Click open (do not select file, select HTML_Class Folder)
Now you will see your html file and can edit directly in familiar IntelliJ environment
In order to visually see structure of your html file you can go to top menu
Views -> Tools Windows -> Structure
1. Shortcut for mac Command + 7
2. Shortcut for win Alt + 7
IntelliJ or other tools has HTML CSS shortcut tools known as Emmet to make your html less error prone by auto-generating most of the tags and attribute typing for examle :
1. h1 + tab -> <h1></h1>
2. p*2 + tab ->
  - <p></p>
  - <p></p>
3. ul>li*3 + tab
```
  <ul>
       <li></li>
       <li></li>
       <li></li>
  </ul>
```
1. and many more here is the full cheatsheet

Here is the full list of html tags.
We will not go through all of them we will see some of the most common ones in the majority of websites.

Heading `h1-h6`

<h1> This is h1 heading content </h1>
<h2> This is h2 heading content</h2>
<h3> This is h3 heading content </h3>
<h4> This is h4 heading content</h4>
<h5> This is h5 heading content </h5>
<h6> This is h6 heading content</h6>

Commenting in HTML

<!--  Anything inside here is comment -->

<!-- <h6> Command + / or Control +/ for comment </h6> -->

Paragraph `<p>` tag

<p> content goes here </p>

You can easily generate dummy text by typing lorem and hitting tab. you can also specify how many word you want by lorem10 -> 10 words.

Quick Task

Add one H1 heading
Add 3 paragraphs with p tag
Add another H2 heading
Add 2 paragrapth with p tag

Breaking up lines `<br/>` , `<hr/>`

<p> Lorem ipsum  <hr/> dolor sit amet, consectetur adipisicing elit, sed do eiusmod </p>
<hr/>

these two tags are for breaking up text or elements from the middle because html will ignore any white space more than 1.

Making text bold `<strong>`

<p>This is very <strong> important </strong>  topic</p>

The text important will be bolded

Making text italic `<em>`

<p>This is <em> cool </em>  topic</p>

The text cool will be italic

Making text underline `<u>`

<p>This is <u> underlined </u>  text</p>

The text underlined will be itaunderlinedlic

`Element` `Attributes`

We can provide key value pair inside opening tag to provide more information about the elememt to transform the elements look or style and others.

<p lang="en-us">  This is an english text I added attribute called lang into this element   </p>
<p style="color: red" >  THIS TEXT SUPPOSED TO BE RED  </p>

in above example lang and style are attribute name en-us and color: red are attribute value. one element can have many attributes.

Adding link using `<a>` tag

You can add link to a destination by providing href attribute , it can point to a external url or other html files in the project. if target attribute is not set to _blank it will open the link in same tab.

external link , open in same tab

<a href="https://www.google.com">Google home page</a>

external link , open in new tab

<a href="https://www.cybertekschool.com/" target="_blank"> Link to Cybertek HomePage  </a>

link to other html file , below example will be linked to a html file called about.html in same directory

<a href="about.html" target="_blank"> About Me </a>

Adding Image : `<img>` tag

img tag is a self closing tag, It is used to display images using the attribute src to specify either local destination or remote url destination Assuming that you have picture in same directory(folder) with the name TheCoolPic.jpg. Here is how you can display it as element

<img src="TheCoolPic.jpg" alt="cool pic here"/>

Common attribute for img tag is alt to provide description about the image and also height and width attributes can be used to adjust the size (even thout it's recommended to do it with css)

<img src="TheCoolPic.jpg" height="500"  alt="The mandalorian picture" />

If you have picture in different location on your computer, you can still provide full path to display it in your html page as below

<img src="Full/Path/To/Image/Folder/TheCoolPic.jpg" height="500"  alt="The mandalorian picture" />

You can also display image in remote location by providing it's url as below example

<img src="https://www.cybertekschool.com/wp-content/uploads/2020/04/bycer-1.png" height="100" alt="cybertek campus">

Block | Container `<div>`

The <div> HTML element is the generic container for flow content. It has no effect on the content or layout until styled in some way using CSS.

We just had 3 images in above example , if we add last 2 images to into div element it will treat it as a block and will show up in new line rather than putting 3 picture side by side.

<img src="TheCoolPic.jpg" alt="mandalorian1"> 
<div>
     <img src="TheCoolPic.jpg" alt="mandalorian2">
     <img src="TheCoolPic.jpg"alt="mandalorian3">
</div>

This is just a quick example , it will become much more obvious when it is combined with css later.

HTML List

Ordered List (1.2.3.)

short cut to generate one ordered list with 3 items ol>li{item$$}*3

   <ol>
        <li>Item01</li>
        <li>Item02</li>
        <li>Item03</li>
   </ol>

Item01
Item02
Item03

Unordered List (* * * *)

short cut to generate one ordered list with 3 items ul>li{item$$}*3

   <ul>
        <li>Item01</li>
        <li>Item02</li>
        <li>Item03</li>
   </ul>

Item01
Item02
Item03

HTML `<table>`

<table> tag is to define table
<thead> tag to define this is where header go
<tr> to define this is table row
<th> to define this is actual table header
<td> to define cell value
<tbody> to define table body other than header
<tr> table rows
<td> actual cell

Emmet shortcut to generate below table table>thead>(tr>td{Header$}*2)^tbody>tr*3>td{Value$$$}*3**

    <table>
      <thead>
            <tr>
                 <td>Header1</td>
                 <td>Header2</td>
            </tr>
      </thead>
      <tbody>
            <tr>
                 <td>value001</td>
                 <td>value002</td>
            </tr>
            <tr>
                 <td>value001</td>
                 <td>value002</td>
            </tr>
            <tr>
                 <td>value001</td>
                 <td>value002</td>
            </tr>
      </tbody>
  </table>

Name		Name	Last commit message	Last commit date
Latest commit History 18 Commits
images		images
.gitignore		.gitignore
Day2.html		Day2.html
ReadMe.md		ReadMe.md
TheCoolPic.jpg		TheCoolPic.jpg
myFirstPage.html		myFirstPage.html

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Front End Development (Day 1 of 2)

HTML

CSS

JavaScript

Objective :

Let’s create our first HTML file

Working with HTML in IntelliJ

Heading `h1-h6`

Commenting in HTML

Paragraph `<p>` tag

Quick Task

Breaking up lines `<br/>` , `<hr/>`

Making text bold `<strong>`

Making text italic `<em>`

Making text underline `<u>`

`Element` `Attributes`

Adding link using `<a>` tag

Adding Image : `<img>` tag

Block | Container `<div>`

HTML List

HTML `<table>`

About

Releases

Packages

Languages

simsekaliUS/HTML_Class

Folders and files

Latest commit

History

Repository files navigation

Front End Development (Day 1 of 2)

HTML

CSS

JavaScript

Objective :

Let’s create our first HTML file

Working with HTML in IntelliJ

Heading h1-h6

Commenting in HTML

Paragraph <p> tag

Quick Task

Breaking up lines <br/> , <hr/>

Making text bold <strong>

Making text italic <em>

Making text underline <u>

Element Attributes

Adding link using <a> tag

Adding Image : <img> tag

Block | Container <div>

HTML List

HTML <table>

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Heading `h1-h6`

Paragraph `<p>` tag

Breaking up lines `<br/>` , `<hr/>`

Making text bold `<strong>`

Making text italic `<em>`

Making text underline `<u>`

`Element` `Attributes`

Adding link using `<a>` tag

Adding Image : `<img>` tag

Block | Container `<div>`

HTML `<table>`

Packages