Learning Group For Web Technologies

Discussion in 'Education & Personal Growth' started by reca, Sep 29, 2016.

  1. reca

    reca Silver IL'ite

    Messages:
    193
    Likes Received:
    183
    Trophy Points:
    93
    Gender:
    Female
    Hello @shravs3 .Thank you for your interest in UI development. I have not heard about this program. Can you link it here ? meanwhile I came across Learn to code with free online courses, programming projects, and interview preparation for developer jobs. . This I liked cos the Editor is embedded and comes with guided instructions , we can earn badges and it is free of cost! you can try this ...
     
    shravs3 likes this.
  2. reca

    reca Silver IL'ite

    Messages:
    193
    Likes Received:
    183
    Trophy Points:
    93
    Gender:
    Female
    Hello @Gauri03 : Thank you for your warm welcome!
     
  3. reca

    reca Silver IL'ite

    Messages:
    193
    Likes Received:
    183
    Trophy Points:
    93
    Gender:
    Female
    Hello Ladies ,
    here is my day 11 update .
    Day 11
    Today I learnt about the HTML formatting options. When we are posting on IL, if we select a text and press the B or I, what happens ? The text is made Bold and Italics ! What is happening under the hood ?!
    When we select and press these buttons , a formatting tag is added to the selected text.
    Formatting options like bold, italics, Emphasize, marked, deleted , superscript and subscript are available in HTML.

    We shall see what that means with the below code example.

    In the h1 tag, i tag is added to make the text italics .
    here nesting of tags is done . example the i tag is within the h1 tag .
    b tag which makes the text bold is within the p tag(paragraph tag) .

    Feel free to copy the below code, paste in a notepad, save the file with .html extension. Right click, open the file with browser. Magic ! is what you see :thumbup:

    <!Doctype HTML>
    <html>
    <head>
    <title>HTML text formatting</title>
    </head>
    <body>

    <h1><i>HTML Formatting</i> </h1>
    <p> This is <b>bold text</b> example</p>
    <p> This is <strong>Important text </strong> example</p>
    <p> This is <i>Italic text</i> example</p>
    <p> This is <em>Emphasized text</em> example</p>
    <p> This is <mark>Marked text</mark> example</p>
    <p> This is <small>Small text</small> example</p>
    <p> This is <del>Deleted text</del> example</p>
    <p> This is <ins>Inserted text</ins> example</p>
    <p> This is <sub>Subscript text</sub> example</p>
    <p> This is <sup>Superscript text</sup>example</p>

    </body>
    </html>

    Do try and let me know the feedback .If you want me to tag you from my next post, please reply here/message me :ciao:
    Tagging : @Gauri03 , @Sunshine2020 , @Sparkle , @Pushhu ,@curiousgals78 ,@EagerForInfo ,@kaniths,@shravs3

    2018-04-28_11-57-36.jpg
    Best Regards,
    R
     
    Gauri03 and kaniths like this.
  4. reca

    reca Silver IL'ite

    Messages:
    193
    Likes Received:
    183
    Trophy Points:
    93
    Gender:
    Female
    Hello Ladies,
    My day 12 update
    Day 12
    Today I learnt about quotation and citation elements of HTML .
    Here is a famous quote by Albert Einstein "A person who never made a mistake never tried anything new" . When we use text or speech by other person in our text/ speech , we call the copied lines quotes. They have to be enclosed in double quotation marks "" . HTML has an element for quotation mark called q .
    Lets see how to use this :
    in the below code, the q tag is used within the p tag to include the quote. when we use the q tag, the double quotes are included around the quote. This is used when we use part of speech from other person .

    There is one more concept. Blockquote citing. Blockquote is indented by default. I am using few lines of text from Indus ladies in my website, I will use blockquote element. These are not my own things, I am reusing content created by someone else, then I use quotations and citations. Please see the attachment for executed result. 2018-04-29_10-03-35.jpg

    <!Doctype HTML>
    <html>
    <head>
    <title>HTML Quotation and citation</title>
    </head>
    <body>

    <h1><i>HTML Quotation and citation</i> </h1>
    <p> This is a famous quote by Albert Einstein <q>A person who never made a mistake never tried anything new</q></p>
    <blockquote cite="Indusladies">
    Indusladies. Welcome to Indusladies.com, an Indian Ladies Community.
    This is an Indian Ladies discussion board where we discuss various topics,
    ask questions, get help, share tips,
    read and write blogs and along the way build authentic and enduring friendships.
    </blockquote>
    </body>
    </html>

    Thank you for going through the post :ciao:
    Tagging : @Gauri03 , @Sunshine2020 , @Sparkle , @Pushhu , @curiousgals78 , @EagerForInfo , @kaniths, @shravs3


     
    Gauri03 and kaniths like this.
  5. reca

    reca Silver IL'ite

    Messages:
    193
    Likes Received:
    183
    Trophy Points:
    93
    Gender:
    Female
    Hello ILs,
    My day 13 update.
    Day 13
    In any programming Language, comments plays a very important role. Although HTML is not a programming language but Markup Language, it supports comments. Comments are not executed during the program runtime.
    1.They are added to improve the readability of the program when there is a complex logic involved
    2.To block a code line/code lines which are not needed in the program
    3.To remind you something in the program context. May be to enhance the program with certain features in the future for example.

    Here is the syntax :
    <!-- Your comment -->



    Code example :
    <!Doctype HTML>
    <html>
    <head>
    <title>HTML Comments</title>
    </head>
    <body>

    <h1><i>HTML Comments</i> </h1> <!--This is heading -->
    <p> This is a paragraph. Paragraph is a set of related sentences.</p>

    <!-- <p>This paragraph has been commented</p> -->
    <!-- More html tags can be added below to enhance page features -->
    </body>
    </html>
    Execution Result : 2018-04-30_12-42-38.jpg Thank you for going through the post:ciao: .
    Tagging: @Gauri03 , @Sunshine2020 , @Sparkle , @Pushhu , @curiousgals78 , @EagerForInfo , @kaniths, @shravs3 ,
    @deepshika1 , @Arunaravi
     
    Gauri03, kaniths and shravs3 like this.
  6. reca

    reca Silver IL'ite

    Messages:
    193
    Likes Received:
    183
    Trophy Points:
    93
    Gender:
    Female
    Hello ILs,
    My 14 day update
    Day 14
    I love colors :dev14:. On my day 10 update I had detailed about using the 'style' attribute of the HTML. There was also mention about how 'style' can be used to color text , color background. Today I learnt more about the coloring options that exist in HTML .
    HTML colors can be specified using the color names or RGB(Red,blue,green),RGBA(Red,blue,green,alpha),HSL ( Hue, saturation, lightness),HSLA ( Hue, saturation, lightness, alpha), HEX( Hexadecimal value).

    Today I learnt about RGB concept.
    Using RGB: RGB stands for Red,Blue and Green. The values of each color range between 0-255. It is called the Intensity. rgb(Red,Blue,Green) is the syntax. Please see the example below. RGB is used to give background color. It can also be used to give color to text.

    There is an interesting 'COMMENT' in the code, please read through!

    If you love colors, this is a must try piece of code. Just copy, paste it in notepad, save as .html file. Open the file with browser. You see pallet of colors. Beautiful colors !!! Feel free to change the color values and get thousands of differnt colors !

    Code :

    <!Doctype HTML>
    <html>
    <head>
    <title>HTML Colors</title>
    </head>
    <body>
    <h1><i>HTML Colors</i> </h1> <!--This is heading -->
    <p>In HTML, you can specify colors using RGB values.</p>
    <h6 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h6>
    <h6 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h6>
    <h6 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h6>
    <h6 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h6>
    <h6 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h6>
    <h6 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h6>
    <!--Same intensity value leads to different shades of Grey! Was this concept used to create 50 shares of grey! LOL !!! -->
    <h6 style="background-color:rgb(0, 0, 0);">rgb(0, 0, 0)</h6>
    <h6 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h6>
    <h6 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h6>
    <h6 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h6>
    <h6 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h6>
    <h6 style="background-color:rgb(255, 255, 255);">rgb(255, 255, 255)</h6>
    </html>​

    Output:

    2018-05-01_17-03-43.jpg

    Thank you for going through the post girls :ciao: .
    Tagging: @Gauri03 , @Sunshine2020 , @Sparkle , @Pushhu , @curiousgals78 , @EagerForInfo , @kaniths, @shravs3 , @deepshika1 , @Arunaravi
     
    Last edited: May 1, 2018
    Gauri03, shravs3 and kaniths like this.
  7. reca

    reca Silver IL'ite

    Messages:
    193
    Likes Received:
    183
    Trophy Points:
    93
    Gender:
    Female
    Hello ILs,
    Here is my day 15 update.
    Day 15
    Today I continuted to learn HTML colors. I cannot get enough of colors ! Another way to color the HTML content is using 'color names' as the CSS value for CSS property of the Style attribute.

    In the below code the content(text) of the h1 tag is colored using style attribute .

    1.style is the attribute
    2.color is the css property
    3.Tomato,Orange etc are css color values


    <!Doctype HTML>
    <html>
    <head>
    <title>HTML Colors</title>
    </head>
    <body>
    <h1><i>HTML Colors</i> </h1> <!--This is heading -->
    <p>In HTML, you can specify colors using <b>color names</b>.</p>

    <h1 style="color:Tomato;">Tomato</h1>
    <h1 style="color:Orange;">Orange</h1>
    <h1 style="color: DodgerBlue;">DodgerBlue</h1>
    <h1 style="color:MediumSeaGreen;">MediumSeaGreen</h1>
    <h1 style="color:Gray;">Gray</h1>
    <h1 style="color: Pink;">Pink</h1>
    <h1 style="color:Violet;">Violet</h1>
    <h1 style="color:LightGray;">LightGray</h1>

    </body>
    </html>
    2018-05-02_20-56-31.jpg

    Thank you for going through the post ILs :ciao: .
    Tagging: @Gauri03 , @Sunshine2020 , @Sparkle , @Pushhu , @curiousgals78 , @EagerForInfo , @kaniths, @shravs3 , @deepshika1 , @Arunaravi
     
    kaniths and shravs3 like this.
  8. reca

    reca Silver IL'ite

    Messages:
    193
    Likes Received:
    183
    Trophy Points:
    93
    Gender:
    Female
    Hello ILs,
    Here is my day 16 update
    Day 16:
    Today I learnt about HTML Links . In Website/ Web application, links plays a very important role. By just clicking the link, we can jump to another web page/ document . Link is used for navigation. Lets see how the link works .
    When we hover over a link, the mouse pointer turns into a little hand.
    Syntax:
    <a href="url">link text</a>

    <a>
    tag is used for links. href is the attribute which holds the url of the page to which the link jumps to on click .

    To try the below code, copy the code and paste it in a notepad. Save it with .html file extension. Open with a browser.
    You should be able to see link to visit the Indus ladies page! Its fun, do try out !

    Source code:
    <!DOCTYPE html>
    <html>
    <body>

    <h1>HTML Links</h1>
    <a href="Recent Posts | Indusladies">Visit our Indus Ladies Page</a>

    </body>
    </html>

    Result :

    2018-05-03_20-02-07.jpg
    Thank you for going through the writeup girls :ciao: .
    Tagging: @Gauri03 , @Sunshine2020 , @Sparkle , @Pushhu , @curiousgals78 , @EagerForInfo , @kaniths, @shravs3 , @deepshika1 , @Arunaravi
     
    kaniths and shravs3 like this.
  9. reca

    reca Silver IL'ite

    Messages:
    193
    Likes Received:
    183
    Trophy Points:
    93
    Gender:
    Female
    Hello ILs,
    Here is my day 17 update
    Day 17
    HTML Images . I love pictures !
    Adding pictures into the website makes it more interesting and attractive than just plain text.
    Let see how to add an image to the webpage.
    Syntax:
    <img src="url">
    1.<img> tag is used to add image
    2.src attribute is used to provide the image file name including its location on the local machine/ url from the web.

    Additionally, we can adjust the width and height of the image using the width and height attributes and setting values to them. These values will be in pixels( picture element).

    source code
    <!DOCTYPE html>
    <html>
    <body>

    <h2 style="color:red"><i>HTML Image</i></h2>
    <img src="https://upload.wikimedia.org/wikipedia/commons/2/2a/Junonia_lemonias_DSF_upper_by_Kadavoor.JPG" width="800" height="400">
    </body>
    </html>

    Result:
    2018-05-04_14-37-47.jpg
    Thank you for going through the post girls :ciao: .
    Tagging: @Gauri03 , @Sunshine2020 , @Sparkle , @Pushhu , @curiousgals78 , @EagerForInfo , @kaniths, @shravs3 , @deepshika1 , @Arunaravi
     
    kaniths, Ramya2912 and shravs3 like this.
  10. shravs3

    shravs3 IL Hall of Fame

    Messages:
    3,207
    Likes Received:
    5,845
    Trophy Points:
    425
    Gender:
    Female
    This image is beautiful!
     

Share This Page