Programming Diaries

27 Nov 2020 08:04

All those methods to give these output in the browser.

Programming Diaries

27 Nov 2020 07:59

Using inline method,

Programming Diaries

27 Nov 2020 07:49

#CSS
What is CSS?
CSS stands for cascading style sheets. It describes how HTML elements are to be displayed on screen. It takes the class, id and HTML tags to style them.

Programming Diaries

15 Nov 2020 08:52

#HTML Class and Id
These are the most important things in HTML since they help select elements in different things. either to style the html using css or make the page dynamic using javascript the elements have to be selected and this is where the class and id attributes comes in handy.
Both class and id are used to give the elements in html a specific name which can be used in other languages later. The difference between them is classes can be used many times. while id names are different with every html element. you cant use the same id name that you used in the previous lines of code.

<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>

Here we used the class name two times and that is okay. But with id the names have to be different just like

<h2 id="city">Paris</h2>
<p id="capitalCity">Paris is the capital of France</p>

Programming Diaries

14 Nov 2020 08:03

And the last thing on form is buttons. Button can be made with a different types of way. There is a button tag that is mainly used. But You could also use CSS or Bootstrap to edit any link or text into a button.
<button>Click Me</button>
You can also add an attribute of the type
<button type="Submit">Submit</button>

Programming Diaries

14 Nov 2020 08:03

We use a select tag. and inside that an options tag which we want to display as a dropdown. In this case it is the Gender.

And a textarea tag alone without any elements can be used as an input.

And the output on the browser is this 👇

Programming Diaries

13 Nov 2020 09:15

@clickbeatz

Programming Diaries

13 Nov 2020 09:13

Here the div tags are used to display the elements in different lines and the br tag to give an extra empty line. To make it look like 👇

Programming Diaries

13 Nov 2020 09:13

On the first input the user can only type in a plain text, and it is mostly used for Names and usernames. The second input allows the user to type numbers only. And the third one is for passwords that means the characters the user enters is displayed as dots intead of a text.

Programming Diaries

13 Nov 2020 09:13

#Attributes
All tags can have attributes, it is mostly used to provide information about an element. they are always place on the starting tag.
<tagname attributename="attributevalue">content</tagname>
For example: <h1 title="My Company"> About Us</h1>

Programming Diaries

13 Nov 2020 09:13

The <div> element or tag

It is mostly used as a container for the other HTML elements. There are no required attributes, style, class and id are common.

Programming Diaries

12 Nov 2020 17:25

Contact @jamesScript for further questions and informations.

Programming Diaries

12 Nov 2020 16:53

Headers, paragraphs and lists. Code and User-Interface(UI)

Programming Diaries

12 Nov 2020 16:53

#Paragraphs
They are just a normal texts. You just have to wrap the thing you want with the "p" tag. Just like <p>this is an article from programming diaries</p>

A little tip: To generate a random paragraph or a dummy text on sublime text and a few other text editors you just have to write "lorem" and hit tab on your keyboard.

Programming Diaries

12 Nov 2020 11:16

As you can see in the picture everything is wrapped in an html tag except the document declaration tag, which is exceptional. and we have two main tags inside the html tag.

1. Head tag
Mostly it is used to write web page titles, information of the website(metadata), link things mainly a stylesheet(a topic for soon coming articles)

2. Body tag
This is the tag where all major things are coded. Like the header, sections, footer and any other thing that we want to display.

Programming Diaries

27 Nov 2020 08:03

Using a single file and putting all the style codes in there.
Remember to put both the html and css file at the same directory.

Programming Diaries

27 Nov 2020 07:55

To use CSS in HTML there are three methods
1. Creating a file with a .css extension and linking it with the HTML using the link tag.(The most professional way).
2. using a style tag and putting all the styles in there
3. using inline method, adding the CSS directly to the element.

Programming Diaries

21 Nov 2020 18:46

Visual studio code text editor latest version

Programming Diaries

14 Nov 2020 09:15

#Images
To display images on a website as a background. CSS comes in handy. But just to display an image you use an img tag on HTML. If the HTML file and the image are in the same directory. all u have to do is just state the image's name with its extension in the src attribute inside the img tag.

<img src="car.jpg"> this code will definitely display the image if the images's name is "car.jpg" and if it is the same directory as the html file.

Programming Diaries

14 Nov 2020 08:03

One more thing. you can use a "placeholder" attribute to make it look like more realistic.

Programming Diaries

14 Nov 2020 08:03

A little tip left out from yesterdays article. We can also add a textarea and a dropdown option on the form. A whole HTML form code with the output will look like this.

Programming Diaries

13 Nov 2020 09:14

A code for the form and "a" tag in use

Programming Diaries

13 Nov 2020 09:13

This is what the output of the code will look like when the data is entered. They are all in the same line because. inputs and labels are inline Elements. we would have to wrap them inside a block level element like a div. to display them on their own line.

Programming Diaries

13 Nov 2020 09:13

#Forms
We usually see a login or signup form in most websites. they were all build with HTML and then styled with CSS and other programming languages are used to make it dynamic. It is pretty easy to make a form. you basically need to know two tags to make a basic form. The label and input tag. First you will have to create a form tag.
<form></form> So the label and input tag will go inside the form tag. you will have to use a type attribute on the input tag to show the browser the type of data the user should enter.

Programming Diaries

13 Nov 2020 09:13

#HTML links
Links are found in nearly all web pages. Links allow users to click their way from page to page.
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand. To show links on HTML an "a" tag is used.

<a href="url">Link text</a>
For example: <a href="google.com"> Visit google.com </a>

Programming Diaries

13 Nov 2020 09:13

Inline VS Block Level Elements
The Inline Elements are tags that doesn't start on a new line when they are used. and they take only the necessary width.
The Block Elements are tags that start on a new line when they are used. and they take as much width as they can.

Example for Inline Elements: Links(<a>), img(<img>), line break(<br>) etc
Example for Block Level Elements: <div>, Headers (h1-h6), Lists, Table etc

Programming Diaries

12 Nov 2020 16:55

Here is the code. If you want to mess around with it.

Programming Diaries

12 Nov 2020 16:53

#Lists
There are two types of lists
1. Ordered Lists
These type of lists are basically represented by ol tag. they display the list written with numbers.
2. Unordered Lists
These type of lists are represented by ul tag. and they display the list written with dots. And the dots can be removed by CSS.

N.B: To display the lists you have to use another tag inside the ol or ul tag. called list tag. which is represented by li. So if you want to display a list of fruits you will write you code like.

for the ordered list
<ol>
<li>Banana</li>
<li>Oranges</li>
<li>Pears</li>
<li>Strawberries</li>
</ol>

for the unordered list
<ul>
<li>Banana</li>
<li>Oranges</li>
<li>Pears</li>
<li>Strawberries</li>
</ul>

Programming Diaries

12 Nov 2020 16:53

#Headers
There are six types of headers based on the font size of the text. h1 - h6. making h1 the biggest text and h6 the smallest one.

Programming Diaries

12 Nov 2020 11:16

<!DOCTYPE html>
Doctype stands for Document Type Declaration. It informs the web browser about the type and version of HTML used in building the web document. This helps the browser to handle and load it properly. While the HTML syntax for this statement is somewhat simple, you must note each version of HTML has its own rules. Because we are using the html 5 and the most popular one, the way we declare the document is <!DOCTYPE html>