Fourni par Blogger.

jeudi 15 septembre 2016

Introduction to the class!

Hello everyone i'm josh i will be your teacher here , we will start step by step  , from Design till the  server responses , we will  be learning  as many as possible  languages  here , Here is the list by Order ! 


          -CLICK HERE FOR THE  NEXT STEP

        -HTML/CSS
        -PHP
       -JAVASCRIPT
       - JQUERY 
       -you can put in comments  your language, i'll write it down..


a sample of a funny javascript code :D ! 

 Published: By: ERRAZKI - 06:54

HTML, coding environment.. how to choose an html editor ? [first step!]

 If you want  to develop a website of course  you will need  a    developping environnement.(this one) 
i highly  recommand "Sublime Text  Editor" this  one  is not free  but  i'll explain later how  to get  it "free of course" it contains syntax hilighting , what  i love more  about  it the  right side mirror, as  a programmer , somtimes i deal with a lot  of  malicious code hidden down the  code , the little "Mirror" shows me  everything in the page in a small  preview .
the gorgeous colors that are well chosen suits  eachothers to give the code you will write  a good  preview  to work in comfort .

First :

  • Go to  https://www.sublimetext.com/3
  • Click on your operating system in the website 
  • a small icon will previw left the bottom 
Then install it , basically just click on the icon   like the one shown , and keep cliking next eventually click finifh installing , an icon will appear in Desktop like  this  : 

  • And that's it  , it's downloaded !
Published: By: ERRAZKI - 06:53

Your First code in Html..[start!]

So why Learn Html ? it's  Easy ... Html  is a most required language , Every Website is made of Html as a first language  it gives the website  it's  skeleton and shape , it is  also required to combine it with "Css" to make it more beautiful , Css is a language , we can say as a website's  "makeup" To well present it and make  it more attractive...
                      YOUR FIRST CODE! OPEN YOUR EDITOR AND TRY IT YOURSELF!


Open sublime Text editor and  type in : 



 The white page  is considered as an output  of the code , we will get to that later...

<!DOCTYPE html> is a code to notify that it's an html page 
<strong>  </strong>  everything inside those  is  considered like  this : this is a strong text
So that means it's more clear than normal Text ..

                          Skeleton of a webpage :

The Basic  Skeleton of the Html language is a required thing if something missing here  then probably your html code is wrong and it's recommended to check it again...
let's see now :  

-That is a very basic html skeleton where  you have head, title and finally Body ...

 in the Body   set the code  : 
<strong> type something </strong>    copy all the code down the picture and save the file with an html extension  just name your file .html 
to test it  just double click it ,  a browser page will appear with what you typed inside ..
click to enlarge

 Published: By: ERRAZKI - 06:52

Basic stuff in Html and you'll definetly see all the time ..

As you can see , until now  we have seen a lot  of    < >    , these  are called tags and they are used  
to express  that it's an html tag , by that i mean  that things between  those signs will be as an order  and won't appear on the output ..

 SO REMEMBER :   
  • TAGS are like  orders 
  • Most of the time  they come in pairs
  • Closed Tag come with  "/" inside 
  • Opened Tag is without ..
  • Example :         this is opened  tag :  <html>   
  • Example:          this is a closed tag : </html>
Now Open your Sublime Editor and open a new file  :  
  • Put in the <!DOCTYPE html>  Tag
  • put in  the html openning and closing Tag
  • Between the tags  write whatever you like..


 Published: By: ERRAZKI - 06:51

Make the Head ... How to put a comment line

Everything in HTML will go between <html>  and </html> .
There are two parts  in Html   the  head  and the body , Let's  first start with 
the Head ....
 The  head contains informations  about your file like the  title  we will see what we can  do with the Head part later in this Part.

<!DOCTYPE html> 
    <html>
             <head>
                             <title>put the title here!</title>
             </head>
     <body>
          <p> 
           //this is  a one line comment
          </p>
         </br> <!-- this  tag is  called break Tag to jump to new line-->
        <!-- To put a multiple lines comment we Do it   
              this way -->
    </body>


    </html>


 
   it's clearly shown in the image  how to set a comment , this one is for multiple lines...
    




Published: By: ERRAZKI - 06:50

HTML Attributes

HTML Attributes







  • All HTML elements can have attributes
  • Attributes provide additional information about an element
  • Attributes are always specified in the start tag
  • Attributes usually come in name/value pairs like: name="value"



    • The lang Attribute

    The language of the document can be declared in the <html> tag.
    The language is declared with the lang attribute.
    Declaring a language is important for accessibility applications (screen readers) and search engines:


    <!DOCTYPE html>
    <html lang="en-US">
    <body>

    ...

    </body>
    </html>

    The first two letters specify the language (en). If there is a dialect, use two more letters (US).

    The title Attribute

    Here, a title attribute is added to the <p> element. The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph:



    Example

    <p title="I'm a tooltip">
    This is a paragraph.
    </p>

    The href Attribute

    HTML links are defined with the <a> tag. The link address is specified in the href attribute:

    Example

    <a href="http://www.link.com">This is a link</a>

    Size Attributes

    HTML images are defined with the <img> tag.
    The filename of the source (src), and the size of the image (width and height) are all provided as attributes:

    Example

    <img src="learntocode.jpg" width="104" height="142">


    The image size is specified in pixels: width="104" means 104 screen pixels wide.
    You will learn more about images and the <img> tag later in this tutorial.

    The alt Attribute

    The alt attribute specifies an alternative text to be used, when an image cannot be displayed.
    The value of the attribute can be read by screen readers. This way, someone "listening" to the webpage, e.g. a blind person, can "hear" the element.

    Example

    <img src="learntocode.jpg" alt="learntocodeforever.com" width="104" height="142">

    We Suggest: Use Lowercase  Attributes

    The HTML5 standard does not require lowercase attribute names.
    The title attribute can be written with uppercase or lowercase like Title and/or TITLE."Learn to code" recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.

    We Suggest: Quote Attribute Values

    The HTML5 standard does not require quotes around attribute values.
    The href attribute, demonstrated above, can be written as:

    Example

    <a href=http://www.learntocodeforever.com>


    Chapter Summary

    • All HTML elements can have attributes
    • The title attribute provides additional "tool-tip" information
    • The href attribute provides address information for links
    • The width and height attributes provide size information for images
    • The alt attribute provides text for screen readers
    • AtLearn to code we always use lowercase attribute names
    • At Learn to code we always quote attribute values with double quotes


     Published: By: ERRAZKI - 06:49

    Html Styles...

    HTML Styles

    I am red

    I am blue


    The HTML Style Attribute

    Setting the style of an HTML element, can be done with the style attribute.
    The HTML style attribute has the following syntax:


    <tagname style="property:value;">

    The property is a CSS property. The value is a CSS value.
    You will learn more about CSS later in this tutorial.

    HTML Background Color


    <body style="background-color:powderblue;">

    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>

    </body>


    HTML Text Color

    The color property defines the text color for an HTML element:


    <h1 style="color:blue;">This is a heading</h1>
    <p style="color:red;">This is a paragraph.</p>

    HTML Fonts

    The font-family property defines the font to be used for an HTML element:

    <h1 style="font-family:verdana;">This is a heading</h1>
    <p style="font-family:courier;">This is a paragraph.</p>

    HTML Text Size

    The font-size property defines the text size for an HTML element:

    <h1 style="font-size:300%;">This is a heading</h1>
    <p style="font-size:160%;">This is a paragraph.</p>

    HTML Text Alignment

    The text-align property defines the horizontal text alignment for an HTML element:

    <h1 style="text-align:center;">Centered Heading</h1>
    <p style="text-align:center;">Centered paragraph.</p>

    Chapter summary

    • Use the style attribute for styling HTML elements
    • Use background-color for background color
    • Use color for text colors
    • Use font-family for text fonts
    • Use font-size for text sizes
    • Use text-align for text alignment
     Published: By: ERRAZKI - 06:45
    Inscription à : Articles (Atom)